how to re render component on Link click

As Danilo pointed out in the comments this is a duplicate of Forcing a React-Router <Link> to load a page, even if we're already on that page

I have a route that has a simple navbar and content below it.

The <Link> from react-router-dom does nothing when clicked on the same page's url.

<Route path="/samePage" component={Component} />

import React from 'react';
import { Link } from 'react-router-dom';

function SomeNavBar(){
   return (
      <Link to="/samePage">Refresh</Link>
   );
}

function Component(){
    // some state
    let [data, setData] = useState([]);

    useEffect(()=>{
      // fetch data from API here
    });

    return (
    <>
       <SomeNavBar />
       {/* Displaying the state*/}
    </>);
}

I'd like to refresh the state on the click of the Link in the NavBar. So one option is to use <a href> instead of <Link to="" /> because it will reload the page and does what's desired.

But reloading is bad as we're using React so how can I re-render the route on click?