I am able to set { component: "fieldset", ...param } to FormControlProps:

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

But not able to do same thing through the 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
      }}
    />
  );
};

It gives me following error:

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

Why is this so?

here is the codesandbox

Update

I just tried similar thing with Grid and it works:

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 in this codesandbox