ReactJs Routing - Not able to redirect to new page

Question

I am redirecting my page to new page based on Button Click. It is actually hitting to new page url in browser, but not loading new component. I am using following code

Managepage.tsx
  <Link to="/newPublication">
                      <button className='metadata-btn' >Add New Publication</button>
                </Link>
                <Routes>
                    <Route path="/newPublication"   >
                     {NewPublication}
                    </Route>
                    {/* <Route path="/"   >
                    {NewPublication}
                    </Route> */}
              </Routes>

NewPublication.tsx file.

const NewPublication = () => {


return (
       
<div> test</div>
  
);

 }
export default NewPublication;