chore(deps): update react monorepo to v18

frontend/package.json

@@ -10,7 +10,7 @@
   "dependencies": {
     "@fullhuman/postcss-purgecss": "4.1.3",
     "@testing-library/jest-dom": "5.16.4",
-    "@testing-library/react": "12.1.5",
+    "@testing-library/react": "13.3.0",
     "@testing-library/user-event": "14.2.1",
     "@types/jest": "27.5.2",
     "@types/node": "15.6.0",
@@ -26,8 +26,8 @@
     "postcss-cli": "9.1.0",
     "postcss-import": "14.1.0",
     "prettier": "2.7.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-router-dom": "6.3.0",
     "react-scripts": "5.0.1",
     "recharts": "2.1.11",

frontend/src/components/NavBar.tsx

@@ -71,7 +71,7 @@ const NavUserInfo: React.FC<{ user: User }> = ({ user }) => {
   );
 };
 
-const NavItem: React.FC = ({ children }) => {
+const NavItem: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return (
     <span className="block mt-4 lg:inline-block lg:mt-0 text-green-200 hover:text-white mr-4">
       {children}

frontend/src/hooks/use-api-client.tsx

@@ -16,7 +16,9 @@ const apiClientContext = createContext<ApiClientContext>(
   undefined as any as ApiClientContext
 );
 
-export const ProvideApiClient: React.FC = ({ children }) => {
+export const ProvideApiClient: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const auth = useProvideApiClient();
 
   return (

frontend/src/hooks/use-auth.tsx

@@ -19,7 +19,9 @@ interface AuthContext {
 
 const authContext = createContext<AuthContext>(undefined as any as AuthContext);
 
-export const ProvideAuth: React.FC = ({ children }) => {
+export const ProvideAuth: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
   const auth = useProvideAuth();
 
   return <authContext.Provider value={auth}>{children}</authContext.Provider>;

frontend/src/index.tsx

@@ -1,12 +1,14 @@
 import React from "react";
-import ReactDOM from "react-dom";
 import { BrowserRouter } from "react-router-dom";
+import { createRoot } from "react-dom/client";
 import { App } from "./App";
 import { ProvideApiClient } from "./hooks/use-api-client";
 import { ProvideAuth } from "./hooks/use-auth";
 import * as serviceWorker from "./serviceWorker";
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root")!);
+
+root.render(
   <React.StrictMode>
     <ProvideAuth>
       <ProvideApiClient>
@@ -15,8 +17,7 @@ ReactDOM.render(
         </BrowserRouter>
       </ProvideApiClient>
     </ProvideAuth>
-  </React.StrictMode>,
+  </React.StrictMode>
-  document.getElementById("root")
 );
 
 serviceWorker.unregister();