material-ui: MUI throwing error in Nextjs

Error:

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=styled&wildcard!=!./Stack' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=styled&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=styled&wildcard!=!./SwipeableDrawer' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=styled&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=styled&wildcard!=!./TextareaAutosize' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=styled&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=styled&wildcard!=!./useMediaQuery' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=styled&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

Expected Behavior

this error shouldn’t come when we’re building the npm run build

Also, I’ve not wrapping the ThemeProvider & CssBaseline in the Nextjs v13 Pages Route _app.tsx file

Furthermore, I am using Nextjs v13 Pages Router with TypeScript.

some small example as below:

import { styled, Typography } from '@mui/material'

export const SectionHeading = styled(Typography)(({ theme }) => ({
  fontFamily: 'var(--quicksand-font)',
  fontSize: theme.typography.pxToRem(22),
  fontWeight: 600,
  lineHeight: 1.2,
  color: '#222',

  '& span': {
    color: 'var(--primary-color)',
  },
}))

and similar way I’ve in other files, this is the way currently I am having the MUI Design, and the components required like, Box, Container, Grid from @mui/material

Environment

System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.41)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.16
    @mui/core-downloads-tracker:  5.14.10
    @mui/icons-material: ^5.14.9 => 5.14.9
    @mui/joy: ^5.0.0-beta.7 => 5.0.0-beta.7
    @mui/material: ^5.14.10 => 5.14.10
    @mui/private-theming:  5.14.10
    @mui/styled-engine:  5.14.10
    @mui/system:  5.14.10
    @mui/types:  7.2.4
    @mui/utils:  5.14.10
    @types/react: 18.2.22 => 18.2.22
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.2.2 => 5.2.2

I am using Latest & Updated CHROME Browser.