Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator))

I’m trying to use MUI(Material UI) App bar. This one. Version : v6.1.1
In the sandbox, when I’m testing its working fine.
Though, when I’m using it in my project. It breaks with the following error :
Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator))

Code :

export default function NavBar() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null); // error points to this line
  const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState<null | HTMLElement>(null);

  const isMenuOpen = Boolean(anchorEl);
  const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);

Check the complete code here

Detailed error message :

navBar.jsx:59 Uncaught TypeError: number 0 is not iterable (cannot read property Symbol(Symbol.iterator))
at NavBar (navBar.jsx:59:1)
at renderWithHooks (react-dom.development.js:15486:1)
at mountIndeterminateComponent (react-dom.development.js:20103:1)
at beginWork (react-dom.development.js:21626:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27490:1)
at performUnitOfWork (react-dom.development.js:26596:1)
at workLoopSync (react-dom.development.js:26505:1)

To know more about the error from MDN, refer.

Could anyone from the community assist me for this.