How do I tell Google when page finishes loading with React Router?

I have a problem with Client Side Rendering for Google not working as expected.

Accordinly GSC, for the page https://zoncircle.com/item/5@xxu7o-ziaaa-aaaak-qinrq-cai the “User-declared canonical” is itself what is correct, but “Google-selected canonical” is https://zoncircle.com/item/2@xxu7o-ziaaa-aaaak-qinrq-cai what is wrong.

My guess is that Google reads https://zoncircle.com/item/5@xxu7o-ziaaa-aaaak-qinrq-cai before my code reacts to URL change and therefore before it loads (through AJAX requests) new texts, so Google uses the text from previously loaded Router page. Note that the HTML page itself normally does not reload, it just uses AJAX to display new texts when the URL changes.

How using React BrowserRouter (or in other way, if needed) can I explain Google when my page finishes loading, for it to use the finished loaded text?

I use

<Route
  path="/item/:id"
  element={<ShowItem/>}
/>

and const { id: idParam } = useParams(); in <ShowItem/>.

I use both <Link to=...> and navigate(...) for user navigating my site.

Accordngly to Google, its search engine can use client-side rendering, but it doesn’t work in my case.

I guess, I should call navigate() after the navigated-to page fully loads (How to do this elegenatly, that is in an object-oriented manner?) This is not easy to do in an object-oriented manner. With <Link to=...> tag, it is even harder (if not impossible) to do, because it (as far as I know) calls navigate() immediately after moving to the new URL, without any waiting (e.g. of when AJAX loads). So, should I eliminate using <Link to=...> as a feature incompatible with SEO? In short: How to do it with React Router?