Getting "No overload matches this call" error while converting code to TypeScript

Question

I'm new with TypeScript, I have converted all my code (React Hooks) into TypeScript except for this one thing where I get the following error:

No overload matches this call.

  Overload 1 of 2, '(props: { component: ElementType; } & { children?: ReactNode; color?: "primary" | "secondary" | undefined; disabled?: boolean | undefined; error?: boolean | undefined; ... 6 more ...; variant?: "outlined" | ... 2 more ... | undefined; } & CommonProps & Pick): Element', gave the following error.
    Property 'component' is missing in type '{ children: Element; className: string; htmlFor: string; }' but required in type '{ component: ElementType; }'.
  Overload 2 of 2, '(props: DefaultComponentProps>): Element', gave the following error.
    Type '{ children: Element; className: string; htmlFor: string; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; color?

The issue is coming from here:

import {
  Box,
  Button,
  TextField,
  FormControl,
  FormGroup,
  Select,
} from "@material-ui/core/";
import { Trans } from "react-i18next";

interface ConnectedLinkProps {
  onSubmit: string;
  classes: {
    formControl: string;
  };
}


<FormControl className={classes.formControl} htmlFor="source">
  <TextField
    id="source"
    disabled={true}
    value={linkSettings.source}
    label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
  />
</FormControl>;

The whole first line which is 'FormControl line' is red.

Answer 1

The error should go away if you remove the props from the FormControl component.

<FormControl>
  <TextField
    id="source"
    disabled={true}
    value="Something"
    label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
  />
</FormControl>

The FormControl component doesn't support the className or htmlFor prop.

Link to a forked example on CodeSandbox.

The working example of the shared code will be something like this:

import React from "react";
import {
  Box,
  Button,
  TextField,
  FormControl,
  FormGroup,
  Select,
  InputLabel
} from "@material-ui/core/";
import { Trans } from "react-i18next";

interface ConnectedLinkProps {
  onSubmit: string;
  classes: {
    formControl: string;
  };
}

const App: React.FC<ConnectedLinkProps> = ({ onSubmit, classes }) => {
  return (
    <div className="App">
      <FormControl>
        <InputLabel htmlFor="source">Something</InputLabel>
        <TextField
          id="source"
          disabled={true}
          value="Something"
          label={<Trans i18nKey="form.linkForm.sourceNode">Source Node</Trans>}
          className={classes?.formControl}
        />
      </FormControl>
    </div>
  );
};

export default App;