modify: update for react v18

package.json

@@ -38,8 +38,8 @@
     "@stylelint/postcss-css-in-js": "^0.38.0",
     "@types/jest": "^28.0.0",
     "@types/node": "18.11.10",
-    "@types/react": "17.0.52",
-    "@types/react-dom": "18.0.9",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.9",
     "@types/react-redux": "7.1.24",
     "@types/styled-components": "5.1.26",
     "babel-core": "^7.0.0-bridge.0",

src/components/Nav/Nav.test.tsx

@@ -1,8 +1,9 @@
-import * as ReactDOM from 'react-dom';
 import { Nav } from '.';
+import { createRoot } from 'react-dom/client';
 
 it('should render without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<Nav />, div);
-  ReactDOM.unmountComponentAtNode(div);
+  const root = createRoot(div);
+  root.render(<Nav />);
+  root.unmount();
 });

src/styles/AppStylesProvider.tsx

@@ -3,7 +3,11 @@ import { ThemeProvider } from 'styled-components';
 import { theme } from './theme';
 import { GlobalStyle } from './GlobalStyle';
 
-const AppStylesProvider: React.FC = ({ children }) => (
+type Props = {
+  children: React.ReactNode;
+}
+
+const AppStylesProvider: React.FC<Props> = ({ children }) => (
   <ThemeProvider theme={theme}>
     <GlobalStyle />
     {children}