I am deploying a reactjs app to azure portal , but I get the follwoing error

My app.jsx file is as follows:

 import React, { Component } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import AppRoutes from './AppRoutes';
 import { Layout } from './Source/components/layout/layout';

render() {
 return (
   <Layout>
     <Routes>
       {AppRoutes.map((route, index) => {
         const { element, ...rest } = route;
         return <Route key={index} {...rest} element={element} />;
       })}
     </Routes>
  </Layout>
);

The index.jsx file is as follows:

  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import { BrowserRouter } from 'react-router-dom';
  import App from './App';
  

 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>)

and my package.json is as follows:

 "dependencies": {
"axios": "^0.26.1",
"express": "^4.17.3",
"html-webpack-plugin": "^5.5.0",
"nodemon": "^2.0.15",
"path": "^0.12.7",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0"

},

"devDependencies": {
"@babel/cli": "^7.7.4",
"@babel/core": "^7.12.10",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@babel/preset-stage-2": "^7.8.3",
"@babel/register": "^7.7.4",
"assert": "^2.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^8.2.3",
"babel-loader": "^8.2.5",
"babel-plugin-styled-components": "^1.12.0",
"css-loader": "^6.7.1",
"eslint": "^4.19.1",
"eslint-plugin-react": "^7.8.2",
"file-loader": "^6.2.0",
"morgan": "^1.10.0",
"style-loader": "^3.3.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"
},

How can i fix this issue , has anyone else seen this issue and how did you resolve it ?