I have set the Routes as below:

<Routes>
    <Route path="/" element={<Home />} />
    <Route path="/example" element={<Example />}>
        <Route path=":id" element={<Another />} />
    </Route>
</Routes>

My Problem is when I visit /example/1 from /example page directly. The content of <Another /> renders correctly. But if I try to visit for example /example/1 while I am on /example/2 the URL changes on the browser but the content of the page does not change. I am using useParms() hook in <Another /> component to generate dynamic content.

How can I solve this issue?