I have the following interfaces:

```js
interface ButtonProps {
  name: string;
}

interface IconButtonProps {
  name: string;
  icon: string;
}
```

I'm trying to create the type for the following component:

```js
<MyGenericComponent component={button} name="button">...
<MyGenericComponent component={iconButton} name="icon-button" icon="icon">...
```

The idea is that I'm unable to type the interface that would represent `MyGenericComponentProps` so that it can accept a react component in the `component` prop as long as all other props given to it are those that the given component would accept!

Something like this:

```js
interface MyGenericComponentProps<T> extends T {
  component: React.FC<T>;
}
```

...where `T` above can be `ButtonProps` or `IconButtonProps`. I know I cannot extend `T` because it's unknown statically, but then how do I ensure that the rest of the props given are those of either `ButtonProps` or `IconButtonProps`?

UPDATE: here's the component definition after answer:

```js
import React from 'react';
import { ButtonProps, IconButtonProps } from '@material-ui/core';

type MyGenericComponentProps<T> = {
    component: React.FC<T>;
} & {
    [key in keyof T]: T[key];
};

const MyGenericComponent = <T extends object>({ component, ...props }: MyGenericComponentProps<T>) => {
    // ... more code here
    const Component = component;
    return <Component {...props} />;
};

export default MyGenericComponent;
```