Puedo establecer { component: "fieldset", ...param } en FormControlProps :

 const Temp = () => { const param: FormControlProps = {}; // Able to set `{ component: "fieldset", ...param }` to `FormControlProps`: <FormControl {...{ component: "fieldset", ...param }} />; };

Pero no puedo hacer lo mismo a través de CustomFormControl :

 interface ICustomFormControlProps { customFormControlProps: FormControlProps; // lets keep them same for some reason } const CustomFormControl = (param: ICustomFormControlProps) => { return <FormControl {...param.customFormControlProps} />; // so, basically CustomFormControl is same as FormControl }; const CustomFormControlVariant1 = (param2: ICustomFormControlProps) => { return ( <CustomFormControl customFormControlProps={{ component: "fieldset", // Error occurs here ...param2.customFormControlProps }} /> ); };

Me da el siguiente error:

 Object literal may only specify known properties, and 'component' does not exist in type 'FormControlProps<"div", {}>'

¿Por qué esto es tan?

aquí está la caja de códigos

Actualizar

Acabo de probar algo similar con Grid y funciona:

 import { Grid, GridProps } from "@mui/material"; interface ICustomControlProps { gridProps?: GridProps; } const CustomControl = (props: ICustomControlProps) => { return <Grid {...props.gridProps}></Grid>; }; const CustomControlVariant1 = (props: ICustomControlProps) => { return ( <CustomControl gridProps={{ item: true, xs: 12, sm: 12, md: 12, ...props.gridProps }} // why this doesnt give any error at all? /> ); };

temp3.tsx en este codesandbox