Merge pull request #23940 from overleaf/td-react-18

Upgrade to React 18

GitOrigin-RevId: 9b81936e6eea2bccd97fe5c2c5841f0b946371b8

services/web/frontend/js/features/header-footer-react/index.tsx

@@ -1,4 +1,4 @@
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 import getMeta from '@/utils/meta'
 import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
 import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
@@ -7,16 +7,17 @@ import { SplitTestProvider } from '@/shared/context/split-test-context'
 const navbarElement = document.getElementById('navbar-container')
 if (navbarElement) {
   const navbarProps = getMeta('ol-navbar')
-  ReactDOM.render(
+  const root = createRoot(navbarElement)
+  root.render(
     <SplitTestProvider>
       <DefaultNavbar {...navbarProps} />
-    </SplitTestProvider>,
-    navbarElement
+    </SplitTestProvider>
   )
 }
 
 const footerElement = document.getElementById('footer-container')
 if (footerElement) {
   const footerProps = getMeta('ol-footer')
-  ReactDOM.render(<Footer {...footerProps} />, footerElement)
+  const root = createRoot(footerElement)
+  root.render(<Footer {...footerProps} />)
 }