react　hooks　エラー解決できない

現状
npx create-react-app my-app --typescriptを実行しreactのプロジェクトを作成しました。
yarn startをすればreactのアプリが立ち上がります。
スタイルにはマテリアルUIを使っており、ほぼほぼmaterialUIからコピペして貼り付けただけです。
yarn startで実行すると下記のエラーが出るのですが解決方法がわかリません。
わかる方いましたらご教授お願いしたいです

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

import React, { FC , useState, Fragment } from 'react';
import {
  Typography,
  TextField,
  OutlinedInput,
  InputAdornment,
  FormHelperText,
  FormControl,
  makeStyles,
  createStyles,
} from '@material-ui/core';
import clsx from "clsx";

const useStyles = makeStyles(() =>
createStyles({
  root: {
    margin: "16px 0",
    width: "100%"
  },
  username: {
    marginBottom: "16px"
  }
})
);

const classes = useStyles();

interface IState {
  name: string;
  password: string;
  companyName: string;
}

const Login: FC = () => {
  const[state, setState] = useState<IState>({
    name: '',
    password: '',
    companyName: '',
  });

  return (
  <Fragment>
    <Typography variant="h1">
      Mach
    </Typography>
    <TextField
      id="outlined-basic"
      label="名前"
      variant="outlined"
      onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
        setState({ ...state, name: e.target.value})
      }}
    />
    <FormControl className={clsx(classes.root)} variant="outlined">
      <OutlinedInput
        id="outlined-adornment-weight"
        value={state.password}
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          setState({ ...state, password: e.target.value})
        }}
        endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
        aria-describedby="outlined-weight-helper-text"
        inputProps={{
          'aria-label': 'weight',
        }}
        labelWidth={0}
      />
      <FormHelperText id="outlined-weight-helper-text">Weight</FormHelperText>
    </FormControl>
  </Fragment>
  );
}

export default Login;