React suspense wouldn't work on latest Next 12 despite configuration

Question

So I have this file called AuthHeader.js in which I am attempting to render children surrounded by a Suspense boundary with a fallback. I added a 5 second delay on the API hoping to see a loader, but it shows blank. I hope someone may be able to help.

I have imported it correctly below:

import { useState, Suspense } from "react";

AuthHeader.js

<Box
        component="main"
        sx={{
          flexGrow: 1,
          p: 3,
          display: { xs: open ? "none" : "block", md: "block" },
        }}
      >
        <DrawerHeader />
        <Suspense fallback={<Spinner />}>
          {/* A component that uses Suspense-based */}
          {children}
        </Suspense>
        
      </Box>

Spinner is contained inside the AuthHeader.js component.

// create a Spinner component with a Circular spinner inside it
  const Spinner = () => (
    <Box

      sx={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        height: "100vh",
      }}
    >
      <CircularProgress />
    </Box>
  );

I also have the following setup on next.config.js

module.exports = {
  reactStrictMode: true,
  experimental: {
    concurrentFeatures: true,
  },
  images: {
    domains: ["images.pexels.com"],
  },
};