I have the next component in my react application:

```
import "./styles.css";

type InpuType = "input" | "textarea";

interface IContainer {
  name: string;
  placeholder: string;
  as: InpuType;
}

const Container = ({
  name,
  placeholder,
  as,
  ...rest
}: IContainer &
  (
    | React.TextareaHTMLAttributes<HTMLTextAreaElement>
    | React.InputHTMLAttributes<HTMLInputElement>
  )) => {
  const Comp = as || "input";
  return <Comp name={name} placeholder={placeholder} {...rest} />;
};

export default function App() {
  return (
    <div className="App">
      <Container name="hi" as="textarea" placeholder="start" />
    </div>
  );
}

```

The `...rest` are all the default props that could be added for a `textarea` or `input`.  
 I have a typescript issue here `<Comp name={name} ...`, hovering over the component i get this message:

```
Type '{ autoComplete?: string | undefined; autoFocus?: boolean | undefined; cols?: number | undefined; dirName?: string | undefined; disabled?: boolean | undefined; form?: string | undefined; ... 261 more ...; placeholder: string; } | { ...; }' is not assignable to type 'IntrinsicAttributes & ClassAttributes<HTMLInputElement> & InputHTMLAttributes<HTMLInputElement> & ClassAttributes<...> & TextareaHTMLAttributes<...>'.

```

and i am not sure how to get rid of that.   
 Question: Why the issue appear and how to solve it?   
 demo:<https://codesandbox.io/s/react-typescript-forked-z6dk4i?file=/src/App.tsx:379-396>