How to link to an external site with Styled Components?

Question

I want to add a link to another website in this code if possible, how would i go about doing this? wanted to add it to the booking now button without changing the current formatting of it. wondering is it possible to directly link to another page through that button or not?

import React from 'react'
import {FaBars} from 'react-icons/fa';
import {Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks, NavBtn, NavBtnLink} from './NavbarElements';

const Navbar = ({ toggle }) => {
    return (
        <>
            <Nav>
                <NavbarContainer>
                    <NavLogo to='/'>SJMOT</NavLogo>
                    <MobileIcon onClick={toggle}>
                        <FaBars />
                    </MobileIcon>
                    <NavMenu>
                        <NavItem>
                            <NavLinks to="about">About</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to="discover">Discover</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to="contact">Contact Us</NavLinks>
                        </NavItem>
                        <NavItem>
                            <NavLinks to="services">Services</NavLinks>
                        </NavItem>
                        <NavBtn>
                            <NavBtnLink to="https://sjmmot.bookingcommerce.com" >Book Now</NavBtnLink>
                        </NavBtn>
                        
                    </NavMenu>
                    
                </NavbarContainer>
            </Nav>
        </>
        );
};

export default Navbar

...

export const NavBtnLink = styled(LinkRouter)`
  border-radius: 50px;
  background: #1d70b8;
  white-space: nowrap;
  padding: 10px 22px;
  color: #010606;
  font-size: 16px;
  outline: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  text-decoration: none;

  &:hover{
    transition: all 0.2s ease-in-out;
    background: #fff;
    color: #010606;
  }
`

Answer 1

Without seeing what the component NavBtnLink is doing then the solution of:

<NavBtnLink>
  <a href="https://sjmmot.bookingcommerce.com" target="_blank" rel="noopener noreferrer">
    Book Now
  </a>
</NavBtnLink>

would work.

Edit

Based on the edit and seeing LinkRouter if you're using React Router per memory you could do:

<NavBtn>
  <NavBtnLink to={{ pathname: `https://sjmmot.bookingcommerce.com`}} target="_blank">Book Now</NavBtnLink>
</NavBtn>