Add a custom className to Material UI Component via attrs in styled-components

I'm trying to add a custom className to a Material UI Button Component which is styled with styled-components, but I'm struggling to figure out how to get it right. The first method I tried was to add a new className via attrs but it didn't work. However, if I pass className as a prop, it seems to accept it with no problem.

Assigning via attrs

import React from "react";
import styled from "styled-components";
import Button, { ButtonProps } from "@mui/material/Button";

const CustomButton = styled(Button).attrs({ className: "custom-button" })``; // <-- Results in error

const MyButton = (props: ButtonProps) => {
  return <CustomButton {...props} />;
};

export default MyButton;

Error:

  Overload 1 of 2, '(props: { form?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; type?: "button" | "submit" | "reset" | undefined; ... 281 more ...; value?: string | ... 2 more ... | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
    Type '{ children?: ReactNode; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 283 more ...; value?: string | ... 2 more ... | undefined; }' is not assignable to type '{ form?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; type?: "button" | "submit" | "reset" | undefined; ... 281 more ...; value?: string | ... 2 more ... | undefined; }'.
      Types of property 'className' are incompatible.
        Type 'string | undefined' is not assignable to type '"custom-button" | undefined'.
          Type 'string' is not assignable to type '"custom-button"'.
  Overload 2 of 2, '(props: StyledComponentPropsWithAs<ExtendButtonBase<ButtonTypeMap<{}, "button">>, any, { className: "custom-button"; }, "className", ExtendButtonBase<ButtonTypeMap<{}, "button">>, ExtendButtonBase<...>>): ReactElement<...>', gave the following error.
    Type '{ children?: ReactNode; classes?: (Partial<ButtonClasses> & Partial<ClassNameMap<never>>) | undefined; color?: "inherit" | ... 6 more ... | undefined; ... 283 more ...; value?: string | ... 2 more ... | undefined; }' is not assignable to type '{ form?: string | undefined; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; type?: "button" | "submit" | "reset" | undefined; ... 281 more ...; value?: string | ... 2 more ... | undefined; }'.
      Types of property 'className' are incompatible.
        Type 'string | undefined' is not assignable to type '"custom-button" | undefined'.

Passing as a prop

import React from "react";
import styled from "styled-components";
import Button, { ButtonProps } from "@mui/material/Button";

const CustomButton = styled(Button)``;

const MyButton = (props: ButtonProps) => {
  return <CustomButton className="custom-button" {...props} />; // <-- Works fine
};

export default MyButton;

Could you please help me to understand what is the difference between the two methods and why it's impossible to do it via attrs for Material UI Button but at the same time it works for regular html buttons?

const button = styled.button.attrs({ className: "custom-button" }) // <-- Works fine