Hello I am trying to use React code splitting on webpack 5.68 as follows

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Suspense>
  </Router>
);

However, I am getting errors, specifically on the console it says an uncaught undefined is being thrown from bootstrap:27, which seems to be a file related to webpack

// Execute the module function
    try {
        var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
        __webpack_require__.i.forEach(function(handler) { handler(execOptions); });
        module = execOptions.module;
        execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
    } catch(e) {
        module.error = e;
        throw e;
    }

Here is bootstrap with the function throwing error e. Now it seems when I go npm start, none of the chunks being built , just a single bundle.js file. I have tried using npm install --save-dev @babel/plugin-syntax-dynamic-import but that didn't work. For reference this app was created using create-react-app