type script error after wrapping Material-UI button - error: Type '{ children: string; color: "light-green"; }' is missing the following properties

Question

I am trying to create a wrapped components based on MUI (@material-tailwind/react) in Next.js 14 but I am encountering a typescript error in MaterialButton component.

Type '{ children: string; color: "light-green"; }' is missing the following properties from type 'Pick<ButtonProps, "children" | "className" | "color" | "disabled" | "translate" | "form" | "slot" | "style" | "title" | "onChange" | "onClick" | "value" | "key" | "autoFocus" | ... 259 more ... | "loading">': placeholder, onPointerEnterCapture, onPointerLeaveCapturets(2739)

The code is page.tsx:

import MaterialButton from "@/components/MaterialButton";

export default function Home() {
  return (
    <div className="p-4">
      <MaterialButton color="light-green">Test</MaterialButton>
    </div>
  );
}

typescript squegly lines

MaterialButton.tsx:

"use client";

import { Button } from "@material-tailwind/react";

type Props = React.ComponentProps<typeof Button>;

const MaterialButton = ({ children, ...restProps }: Props) => {
  return <Button {...restProps}>{children}</Button>;
};

export default MaterialButton;

What should the Props definition be???

Mind you that the linter is suggesting props correctly.

linter working fine

Answer 1

just installing @types/[email protected] fixed the issue