using react-router-dom Link with styled components renders nothing

Question

I am using styled-components for the first time and facing some issue while using Link form react-router-dom v6. Nothing is rendered with the current code but when I remove the Link tag code works fine. Please help.

import styled from "styled-components";
import { Link } from "react-router-dom";

const Home = () => {
  return (
    <Link to="/">
      <HomeButton>Place Order</HomeButton>
    </Link>
  );
};

const HomeButton = styled.button`
  color: black;
  font-weight: bold;
  font-family: "Space Grotesk", sans-serif;

  font-size: 1.2rem;
  background-color: white;
  height: 45px;
  border-radius: 5px;
  width: 86%;
  margin-left: 7%;
  margin-right: 7%;
  margin-top: 20px;
  -webkit-box-shadow: -1px 0px 2px 2px rgba(99, 99, 99, 1);
`;

export default Home;

Answer 1

react router dom v6 requires your navabar component and <Route path= element={}/> if you need to use link.

<Router >
    <Navbar/>
    <Routes>
      <Route path="/" element={<div><h1>Home Page</h1></div>}/>
      <Route path="register" element={<RegisterPage />} />
      <Route path="login" element={<LoginPage />} />
    </Routes>
  </Router>