I want to resolve Invalid Hook Call Warning

#1st
react.development.js:207Warning:Invalid hook call.Hooks can only be called inside of the body of a function component.This could happen for one of the following reasons:
1. You have mismatching versions of React and the render (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

# second
react.development.js:1628 Uncaught TypeError: Cannot read properties of null (reading 'useRef')
    useRef(react.development.js:1628:1)
    at BrowserRouter (index.tsx:151:1)
    at renderWithHooks (react-dom.development.js:16175:1)
    at mountIndeterminateComponent(react-dom.development.js:20913:1)
    at beginWork(react-dom.development.js:22416:1)
    at HTMLUnknownElement.callCallback(react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev(react-dom.development.js:4210:1)
    at invokeGuardedCallback(react-dom.development.js:4274:1)
    at beginWork $1 (react-dom.development.js:27405:1)
    at performUnitOfWork(react-dom.development.js:26513:1)

# third
react-dom.development.js: 18572 The above error occurred in the <BrowserRouter>component:

    at BrowserRouter (http://localhost:3000/static/js/bundle.js:1198:5)
    at App

Consumer adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

import React from 'react';
import'./App.css';
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

// components
import {Restaurants} from './containers/Restaurants';
import {Foods} from './containers/Foods';
import {Orders} from './containers/Orders';

functionApp(){
  return(
    // <BrowserRouter>
    //   <Routes>
    //     // List of stores page
    //     <Route path="/restaurants">
    //       <Restaurants/>
    //     </Route>
    //     // Food List Page
    //     <Route path="/foods">
    //       <Foods/>
    //     </Route>
    //     // Order Page
    //     <Route path="/orders">
    //       <Orders/>
    //     </Route>
    //   </Routes>
      
    // </BrowserRouter>
    <h2>a</h2>
  );
}

export default App;

export const Foods=()=>{
    return(
        <>
            Food List
        </>
    )
}

 senseiy@senseIY-wsl:~/Practice/Rea-pra/playground $docker-compose exec front npm install [email protected]
npm ERR!code ERESOLVE
npm ERR!ERESOLVE could not resolve
US>npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR!Found: [email protected]
npm ERR!node_modules/react-dom
npm ERR!peer react-dom@">=16.8" from [email protected]
npm ERR!node_modules/react-router-dom
npm ERR!react-router-dom@"^6.3.0" from the root project
npm ERR!react-dom@"16.7.0" from the root project
US>npm ERR!
npm ERR! Could not resolve dependency:
npm ERR!react-dom@"16.7.0" from the root project
US>npm ERR!
npm ERR!Conflicting peer dependency:[email protected]
npm ERR!node_modules/react
npm ERR!peer react@"^16.0.0" from [email protected]
npm ERR!node_modules/react-dom
npm ERR!react-dom@"16.7.0" from the root project
US>npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR!this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
US>npm ERR!
npm ERR!See/root/.npm/eresolve-report.txt for a full report.

US>npm ERR!A complete log of this run can be found in:
npm ERR!/root/.npm/_logs/2022-05-18T06_14_24_182Z-debug-0.log

 senseiy@senseIY-wsl:~/Practice/Rea-pra/playground $docker-compose exec front npmls react
app@/usr/src/app
`-- [email protected]
  +-- [email protected]
  | `[email protected] deaduped
  +-- [email protected]
  | `[email protected] deaduped
  `-- [email protected]

<Routes>
          // Store List Page
          <Route path="/restaurants" element={<Restaurants/>}/>
          // Food List Page
          <Route path="/foods" element={<Foods/>}/>
          // Order Page
          <Route path="/orders" element={<Orders/>}/>
   　</Routes>

/Playground-/backend
           |
           -/frontend-/node_modules
           |         |
   -d-c.yml (omitted) / -react-app-/node_modules
                     |           |
                     |           | - package.json
                     |
                     - Dockerfile, package.json, package-lock.json