I was working on Material UI v4 but after the release of MUI (Material UI V5) I have shifted on that but after shifting I cant see anything on storybook docs page. Canvas tab

Docs tab

Button.js

import styled from "styled-components";

const StyledButton = styled(button)`
  width: ${(props) => props.width};
  font-size: 0.9rem;
  background-color: ${(props) => {
    if (props.color === "primary") {
      return "red";
    }

    return props.bgcolor;
  }} !important;
  color: ${(props) => {
    if (props.color === "primary") {
      return "white";
    }
    return props.color;
  }} !important;
  margin-bottom: 0.5rem !important;
  }
`;

export const Button = (props) => {
  return <StyledButton {...props} />;
};

Button Story

import { Button } from "../component/Button";

export default {
  title: "Utilities/Button",
  component: Button,
};

export const Primary = () => (
  <Button color="primary" variant="contained">
    Primary
  </Button>
);

export const Secondary = () => (
  <Button color="secondary" variant="contained">
    Secondary
  </Button>
);

export const fullwidth = () => (
  <Button variant="contained" color="primary" width="100%">
    Primary
  </Button>
);