React js Code Splitting not creating chunks

Im trying to lazy load routes but no matter what I do, I only have one main chunk. Here is the route code.

import React, { Suspense, lazy } from "react";
import {
HomePage,
ProductsPage,
SingleProductsPage,
CartPage,
FAQPage,
SuccessPage,
FailedPage,
DigitalPage,
ReviewPage,
Page404,
PrivacyPolicyPage,
TermsConditionsPage,
} from "./pages";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

const ProductsPageLazy = lazy(() =>
import("./pages/ProductsPage/ProductsPage")
);
const SingleProductPageLazy = lazy(() =>
import("./pages/SingleProductPage/SingleProductsPage")
);
const CartPageLazy = lazy(() => import("./pages/CartPage/CartPage"));
const FAQPageLazy = lazy(() => import("./pages/FAQPage/FAQPage"));
const SuccessPageLazy = lazy(() =>
import("./pages/SuccessFailedPage/SuccessPage")
);
const FailedPageLazy = lazy(() =>
import("./pages/SuccessFailedPage/FailedPage")
);
const ReviewPageLazy = lazy(() => import("./pages/ReviewPage/ReviewPage"));

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" exact element={<HomePage />} />
      </Routes>
      <Suspense fallback={<div>loading...</div>}>
        <Routes>
          <Route path="/products" exact element={<ProductsPageLazy />} />
          <Route path="/products/:id" element={<SingleProductPageLazy />} />
          <Route path="/cart" element={<CartPageLazy />} />
          <Route path="/faqs" element={<FAQPageLazy />} />
          <Route path="/success/:id" exact element={<SuccessPageLazy />} />
          <Route path="/review/:id" exact element={<ReviewPageLazy />} />
          <Route path="/failed" exact element={<FailedPageLazy />} />
        </Routes>
      </Suspense>
      <Routes>
        <Route path="/digital" exact element={<DigitalPage />} />
        <Route path="/privacypolicy" exact element={<PrivacyPolicyPage />} />
        <Route path="/terms" exact element={<TermsConditionsPage />} />
        <Route path="*" element={<Page404 />} />
      </Routes>
    </Router>
  );
};

export default App;

If I wrap the Route with suspense i get blank page. I can only use suspense two way. One inside the element and 2nd is wraping the Routes. In both case I get only one main chunk and its not spliting.

What am I missing. Please help.