Cannot read properties of undefined (reading 'main')

[xiaobreakoutnetwork]

Describe the bug
Cannot read properties of undefined (reading 'main') is occurred.
I am building Avatar component and to add the notification badge to the Avatar component I wrapped the Avatar component with MuiBadge component.

This is the code of my Avatar component.

import { useTheme } from "@mui/material";
import MuiAvatar from "@mui/material/Avatar";
import Badge from "@mui/material/Badge";
import { styled } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import PropTypes from "prop-types";
import React from "react";

import Icon from "../icon";

const avatarSize = [24, 32, 40, 64, 80, 136];
const variants = ["caption", "body2", "body1", "h5", "h4", "h2"];
const iconSize = [9.6, 12.8, 16, 25.6, 32, 54.4];

const CustomAvatar = styled((props) => <MuiAvatar {...props} />)(
  ({ theme, ...props }) => ({
    background: theme.palette.primary.light,
    width: avatarSize[props.size - 1],
    height: avatarSize[props.size - 1],
    fontFamily: "Inter",
    lineHeight: "16px",
    letterSpacing: "0.4px",
    color: "black",
    cursor: "pointer",
  })
);

const Avatar = ({ size, img, notification, username, extra }) => {
  const theme = useTheme();
  const firstname = username ? username.split(" ")[0][0] : "";
  const lastname = username
    ? username.split(" ")[1]
      ? username.split(" ")[1][0]
      : ""
    : "";

  return (
    <Badge
      overlap="circular"
      color={theme.palette.primary.light}
      badgeContent={notification && notification}
    >
      <CustomAvatar src={img} size={size}>
        {extra ? (
          <Typography
            variant={variants[size - 1]}
            sx={{
              fontFamily: "Roboto, Helvetica, Arial, sans-serif",
            }}
          >{`+${extra}`}</Typography>
        ) : username ? (
          <Typography variant={variants[size - 1]}>
            {firstname + lastname}
          </Typography>
        ) : (
          <Icon name="User" size={iconSize[size - 1]} />
        )}
      </CustomAvatar>
    </Badge>
  );
};

Avatar.propTypes = {
  /**
   * Avatar size
   */
  size: PropTypes.number,
  /**
   * Avatar source image
   */
  img: PropTypes.string,
  /**
   * Show status badge
   */
  status: PropTypes.bool,
  /**
   * Number of notifications. If zero, notification badge is not displayed
   */
  notification: PropTypes.number,
  /**
   * Username
   */
  username: PropTypes.string,
  /**
   * If extra is not zero, show number avatar
   */
  extra: PropTypes.number,
};

Avatar.defaultProps = {
  size: 1,
  img: "",
  status: false,
  notification: 0,
  username: "",
  extra: 0,
};

export default Avatar;

And the browser shows this error.

If I remove the color attribute of the <Badge> tag, this error will not appear.

FYI: I override the palette in the theme context.

System

System:
    OS: Windows 10 10.0.19044
    CPU: (4) x64 Intel(R) Core(TM) i5-4210U CPU @ 1.70GHz
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 100.0.4896.127
    Edge: Spartan (44.19041.1266.0), Chromium (100.0.1185.50)
  npmPackages:
    @storybook/addon-actions: ^6.4.22 => 6.4.22
    @storybook/addon-docs: ^6.4.22 => 6.4.22
    @storybook/addon-essentials: ^6.4.22 => 6.4.22
    @storybook/addon-interactions: ^6.4.22 => 6.4.22
    @storybook/addon-links: ^6.4.22 => 6.4.22
    @storybook/builder-webpack5: ^6.4.22 => 6.4.22
    @storybook/manager-webpack5: ^6.4.22 => 6.4.22
    @storybook/react: ^6.4.22 => 6.4.22
    @storybook/testing-library: ^0.0.10 => 0.0.10

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).