Google console has been complaining that my / page is a duplicate of /?utm_source=whatever. I can fix that by making sure that any time the page is requested with anything after the /, it will be delivered with a <link rel="canonical" href="https://example.org/" /> tag in the HTML.

However, the page then loads a React SPA. I believe in these modern times, Google also loads JavaScript pages and assesses them for SEO purposes. So my SPA rendered HTML doc is going to be stuck there with the wrong canonical URL in it when the user navigates like / -> /login.

There seems to be very little info about this around when surely it is a common problem? Should I just make the SPA remove any canonical link tag it sees in the HTML when it loads? Or maybe I need to go through every public route of the React app and make it insert/update the correct canonical link tag every time the user navigates?