React: How to redirect to new route (different id) from same route?

In react-router, we cannot push the same route in useHisotry() and cause a re-render. E.g., if component App is showing on route https://localhost:3000 and I click the button Click Me!, it won’t cause a re-render:

function App() {
   const history = useHistory();
   return (
      <button onClick={() => {history.push('/')}}> Click Me! </button>
   )
}

I want to achieve similar functionality, but I am unsure about the approach or what I am missing.

My current route looks like this: https://localhost:3000/user/1

I want to go to user/2 by clicking a button.

My code looks like the below:

<Route exact path="/user/:userId" component={User} />

function User() {
   const history = useHistory();
   return (
      <button onClick={() => {history.push('/user/2')}}> Click Me! </button>
   )
}

The above code changes the route but doesn’t re-render the component. How can I fix this issue?

Thanks