/* eslint-disable import/no-import-module-exports */

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom';
import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

import Analytics from './components/Analytics';
import Routes from './components/Routes';
import { setup as sentrySetup } from './services/errors';

sentrySetup();
const queryClient = new QueryClient();

const rootEl = document.getElementById('main');
const render = () => {
  ReactDOM.render(
    <StrictMode>
      <QueryClientProvider client={queryClient}>
        <Analytics />
        <Routes />
      </QueryClientProvider>
    </StrictMode>,
    rootEl,
  );
};

if (module.hot) {
  module.hot.accept('./components/Routes', () => {
    render();
  });
}

render();

@@ -97,24 +97,30 @@
 %0Aimport 
-ReactDOM
+%7B createRoot %7D
  from 'r
@@ -127,16 +127,23 @@
 eact-dom
+/client
 ';%0Aimpor
@@ -464,16 +464,49 @@
 main');%0A
+const root = createRoot(rootEl);%0A
 const re
@@ -526,16 +526,12 @@
 %7B%0A  
-ReactDOM
+root
 .ren
@@ -694,20 +694,8 @@
 e%3E,%0A
-    rootEl,%0A
   );

Update to createRoot. This breaks @reach/router routing w. StrictMode