problem in overriding mui5 switch component with styled

I wrote a code like this I want to override mui5 switch but it does not work

import { styled } from "@mui/material/styles";


const GreySwitch = styled(Switch)(({ theme }) => ({
  "& .MuiSwitch-root": {
    width: 64,
    height: 36,
    padding: 0,
    margin: theme.spacingR(1),
  },
  "& .MuiSwitch-switchBase": {
    padding: 0,
    "&$checked": {
      transform: "translateX(-28px)",
      color: theme.palette.common.white,
      "& + $track": {
        backgroundColor: theme.palette.grey.light,
        opacity: 1,
      },
    },
    "&$checked $thumb": {
      backgroundColor: theme.palette.primary.light,
    },
  },
  "& .MuiSwitch-thumb": {
    margin: 6,
    width: 24,
    height: 24,
    borderRadius: 4,
    boxShadow: "none",
    transition: theme.transitions.create(["background-color"]),
    backgroundColor: theme.palette.grey.midDark,
  },
  "& .MuiSwitch-track": {
    borderRadius: 8,
    border: "none",
    backgroundColor: theme.palette.grey.light,
    opacity: 1,
  },
}));

export default GreySwitch;