Navigate through components in reactjs

export function NavBar(){
    let [nav,setNav] = useState("home");
    return(
    <div id="navbar-container" >
        <div id="navlinks">
        <p onClick={ ()=>setNav("home")  }  >
             <Link to="/" className={nav==='home'?"active":" "}>Home</Link>
        </p>
        <p onClick={ ()=>setNav("about")  } >
            <Link to="/about"  className={nav==='about'?"active":" "} >About</Link>
        </p>
        <p onClick={ ()=>setNav("projects")  } >
            <Link to="/projects"  className={nav==='projects'?"active":" "}>Projects</Link>
        </p>

export function HomePage(){
    let Navigate = useNavigate()
    function redirectProjetcs(){
        Navigate('/projects');
    }
    return(
        <>
        <motion.button
         whileHover={{
            scale:1.2,origin:0,boxShadow:'5px 5px 5px lightblue'
        }}
        onClick={redirectProjetcs}
        >Projects</motion.button>
        </div>
        </>
    )
}