How to use material Ui in react with typescript

Question

this is my code, it works fine, but i want to use material ui with it. but when for example i use TextField instead of input i get the error

Uncaught (in promise) Error: Request failed with status code 422
    at createError (createError.js:16)
    at settle (settle.js:17)
    at XMLHttpRequest.handleLoad (xhr.js:69)

I installed the npm package of material ui and I import TextField and then use it instead of input..

So i don't understand what is wrong here? Can anyone help?

import * as React from "react";
import { useState } from "react";
import { useForm } from "react-hook-form";
import TextField from "@material-ui/core/TextField";

import axios from "axios";

import "./App.css";

type FormData = {
  first: string;
  infix: string;
  last: string;
  email: string;
  message: string;
};
function App() {
  const { register, handleSubmit } = useForm<FormData>();
  const [first, setVoor] = useState("");
  const [infix, setTussen] = useState("");
  const [last, setAchter] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const onSubmit = handleSubmit(({ first, infix, last, email }) => {
    setVoor(first);
    setTussen(infix);
    setAchter(last);
    setEmail(email);

    axios
      .post(" https://code-application-api.devheld.nl/registration", {
        first,
        infix,
        last,
        email,
      })
      .then((res) => {
        console.log(res.data, "data?");
        setMessage(res.data.message);
      });
  });

  return (
    <form onSubmit={onSubmit}>
     <TextField name="first" ref={register} label="voornaam" />
      <label style={{ color: "black" }}>Tussenvoegsel</label>
      <input name="infix" ref={register} />
      <label style={{ color: "black" }}>Achternaam</label>
      <input name="last" ref={register} />
      <label style={{ color: "black" }}>E-mail</label>
      <input name="email" ref={register} />

      <input type="submit" />

      <p>{first}</p>
      <p>{infix}</p>
      <p>{last}</p>
      <p>{email}</p>
      {message && <p>{message}</p>}
    </form>
    // <p>{Object.keys(email)}</p>
  );
}

export default App;

Answer 1

You need to take care with somethings and do a little configuration. Material-UI Documentation