Why property spreading inside Grid works but doesnt work in FormControl?

The title of the question says it all: Why property spreading inside Grid works but doesnt work in FormControl?

But I guess more clarity can only be brought through the code. Please find the detailed description in the code:

Why spreading in Grid works but doesnt work in FormControl? (Please find the detailed description in the code comment)Codesandbox can be found here.

import { FormControl, FormControlProps, Grid, GridProps } from "@mui/material";interface ICustomControlProps {  gridProps?: GridProps;  formControlProps?: FormControlProps;}const CustomControl = (props: ICustomControlProps) => {  return (<Grid {...props.gridProps}><FormControl {...props.formControlProps} /></Grid>  );};const CustomControlVariant1 = (props: ICustomControlProps) => {  return (<CustomControl      /**       * Below gridProps is of type GridProps.       * It is set to object with some fixed (item, xs, sm, md) properties and spreaded props.gridProps        * (which is of type GridProps).        * But doing exactly same with formControlProps doesnt work: setting fixed component properties       * and spreaded props.formControlProps       */      gridProps={{ item: true, xs: 12, sm: 12, md: 12, ...props.gridProps }}      formControlProps={{        component: "fieldset",  /** ERROR: Type '{ children?: React.ReactNode; classes?: Partial<FormControlClasses> &                                   * Partial<ClassNameMap<never>>; color?: "error" | ... 4 more ... | "warning"; ...                                  * 264 more ...; component: string; }' is not assignable to type 'FormControlProps<"div", {}>'.                                  * Object literal may only specify known properties, and 'component' does not exist in type                                   * 'FormControlProps<"div", {}>'.                                   *                                   * Object literal may only specify known properties, and 'component'                                  * does not exist in type 'FormControlProps<"div", {}>'.ts(2322)                                  */        ...props.formControlProps      }}    />  );};

Update

Just to add some information which might help to answer above question, note that adding another level of spreading for FormControl works:

<CustomControl      gridProps={{ item: true, xs: 12, sm: 12, md: 12, ...props.gridProps }}      // this works!! So, `component` is indeed on `FormControlProps`      // which can be confirmed here: https://mui.com/api/form-control/#props      formControlProps={{        ...{          component: "fieldset",          ...props.formControlProps        }      }}    />

Here is the codesandbox for this code.

I find both approaches logically correct and in my opinion, both should work, but am not able to understand why the first one is not working and is giving error.