I have a simple react component I've setup importing Select from Mui, and I keep getting a

ReferenceError: transform is not defined
    at eval (eval at result (http://localhost:9000/vendors-node_modules_mui_material_Button_Button_js-node_modules_mui_material_MenuItem_MenuIte-864278.iframe.bundle.js:146038:17)

My code to produce this component is as follows:

import MuiMenuItem from '@mui/material/MenuItem';
import MuiSelect from '@mui/material/Select';
import React from 'react';

interface Item<V, L> {
  label?: L;
  value: V;
}

export interface SelectProps<V = string | number, L = string | number> {
  items: Item<V, L>[];
  label?: string;
  handleChange: () => void;
  selected?: Item<V, L>;
  includeEmpty?: boolean;
}

export const Select = ({
  includeEmpty,
  items,
  label,
  handleChange,
  selected
}: SelectProps) => {
  return (
    <MuiSelect label={label} value={selected?.value} onChange={handleChange}>
      {includeEmpty && <MuiMenuItem value="">None</MuiMenuItem>}
      {items.map((item) => {
        return (
          <MuiMenuItem key={item.value} value={item.value}>
            {item.label || item.value}
          </MuiMenuItem>
        );
      })}
    </MuiSelect>
  );
};

This is running in a storybook story and is wrapped in a custom theme. I have added transform to multiple locations in the theme (which did not help), including

MuiMenuItem: {
        styleOverrides: {
          root: {
            transform: 'translate(-5, -5px) scale(0)'
          }
        }
      },
      MuiMenu: {
        styleOverrides: {
          root: {
            transform: 'translate(-5, -5px) scale(0)'
          }
        }
      }
    }

One last note, the storybook component does mention "The above error occurred in the MuiMenuItemRoot component"

Any help on this matter would be greatly appreciated!

Update 1:

I have also tried downgrading @mui/material to 5.1.0 from 5.9.1 and same results

I have also tried replace the select with just menu

import Button from '@mui/material/Button';
import MuiMenu from '@mui/material/Menu';
import MuiMenuItem from '@mui/material/MenuItem';
import React from 'react';

interface Item<V, L> {
  label?: L;
  value: V;
}

export interface SelectProps<V = string | number, L = string | number> {
  items: Item<V, L>[];
  label?: string;
  handleChange: () => void;
  selected?: Item<V, L>;
  includeEmpty?: boolean;
}

export const Select = ({
  includeEmpty,
  items,
  label,
  handleChange,
  selected
}: SelectProps) => {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);
  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };
  return (
    <>
      <Button onClick={handleClick}>Button</Button>
      <MuiMenu anchorEl={anchorEl} open={open} onClose={handleClose}>
        {includeEmpty && <MuiMenuItem value="">None</MuiMenuItem>}
        {items.map((item) => {
          return (
            <MuiMenuItem key={item.value} value={item.value}>
              {item.label || item.value}
            </MuiMenuItem>
          );
        })}
      </MuiMenu>
    </>
  );
};

This also results in the same thing.

Update 2

I have discovered the line of @mui/material that it is occurring on https://github.com/mui/material-ui/blob/512896973499adbbda057e7f3685d1b23cc02de9/packages/mui-system/src/createTheme/createSpacing.ts#L55