react-router-dom사용이후 컴파일은 성공했으나 그뒤로 지속적인 문제가 발생합니다..

import "./App.css";
import MainPageComponent from "./main";
import { Switch, Route } from "react-router-dom";
import UploadPage from "./upload";
import ProductPage from "./product";
function App() {
  return <div>
    <Switch>
      <Route exact={true} path={"/"}>
    <MainPageComponent/>;
    </Route>
    <Route exact={true} path="/product">
    <ProductPage/>
    </Route>
    <Route exact={true} path="/upload">
      <UploadPage/>
    </Route>
    </Switch>
        </div>
}

export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
    <React.StrictMode>
        <Router>
            <App />
        </Router>
    </React.StrictMode>,
    document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

"name": "reactsecond",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

오류내용- 화면이 빈페이지로나옴(컴파일은 success)

react-dom.development.js:86 Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot

printWarning @ react-dom.development.js:86

bootstrap:27 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

at ensureRootIsScheduled (react-dom.development.js:25626:1)

at scheduleUpdateOnFiber (react-dom.development.js:25531:1)

at updateContainer (react-dom.development.js:28858:1)

at react-dom.development.js:29576:1

at flushSync (react-dom.development.js:26189:1)

at legacyCreateRootFromDOMContainer (react-dom.development.js:29575:1)

at legacyRenderSubtreeIntoContainer (react-dom.development.js:29601:1)

at Object.render (react-dom.development.js:29685:1)

at ./src/index.js (index.js:8:1)

at options.factory (react refresh:6:1)

140react-dom.development.js:26146 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

at batchedUpdates$1 (react-dom.development.js:26146:1)

at batchedUpdates (react-dom.development.js:3991:1)

at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)

at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)

at dispatchEvent (react-dom.development.js:6457:1)

at dispatchContinuousEvent (react-dom.development.js:6444:1)

5react-dom.development.js:26146 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

at batchedUpdates$1 (react-dom.development.js:26146:1)

at batchedUpdates (react-dom.development.js:3991:1)

at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)

at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)

at dispatchEvent (react-dom.development.js:6457:1)

at dispatchDiscreteEvent (react-dom.development.js:6430:1)

4react-dom.development.js:26146 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

at batchedUpdates$1 (react-dom.development.js:26146:1)

at batchedUpdates (react-dom.development.js:3991:1)

at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)

at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)

at dispatchEvent (react-dom.development.js:6457:1)

at dispatchContinuousEvent (react-dom.development.js:6444:1)

8react-dom.development.js:26146 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

at batchedUpdates$1 (react-dom.development.js:26146:1)

at batchedUpdates (react-dom.development.js:3991:1)

at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)

at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)

at dispatchEvent (react-dom.development.js:6457:1)

at dispatchDiscreteEvent (react-dom.development.js:6430:1)

128react-dom.development.js:26146 Uncaught TypeError: Cannot read properties of undefined (reading 'isBatchingLegacy')

at batchedUpdates$1 (react-dom.development.js:26146:1)

at batchedUpdates (react-dom.development.js:3991:1)

at dispatchEventForPluginEventSystem (react-dom.development.js:9287:1)

at dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay (react-dom.development.js:6465:1)

at dispatchEvent (react-dom.development.js:6457:1)

at dispatchContinuousEvent (react-dom.development.js:6444:1)