title: 'onChange' is specified more than once, so this usage will be overwritten
body: <p>Im Learning ReactJs ... I want Design a Form (Like Section Exprience in Linkedin) with React Hook Form, Material Ui and TypeScript.</p>
  <p>I Faced a Error with this text: 'onChange' is specified more than once, so this usage will be overwritten.</p>
  <p>my function in onChange, doesn't work. I want to register with react hook form. how can I solve this error?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Typography from "@mui/material/Typography";
  import TextField from "@mui/material/TextField";
  import Box from "@mui/material/Box";
  import { React, useState } from "react";
  import { useForm, SubmitHandler } from "react-hook-form";
  import Divider from "@mui/material/Divider";
  import Select, { SelectChangeEvent } from "@mui/material/Select";
  import MenuItem from "@mui/material/MenuItem";
  import FormControl from "@mui/material/FormControl";
  import InputLabel from "@mui/material/InputLabel";
  
  // React Hook Form Types
  type Inputs = {
    title: string;
    employment: string;
    company: string;
    location: string;
    startDate: string;
    endDate: string;
    description: string;
  };
  
  function ExprienceCreate() {
    const [employment, setEmployment] = useState("");
  
    // React Hook Form
    const {
      register,
      handleSubmit,
      watch,
      formState: { errors },
    } = useForm&lt;Inputs&gt;();
  
    const onSubmit: SubmitHandler&lt;Inputs&gt; = (data) =&gt; console.log(data);
  
    // Function For Employment Type Select
    const handleChange = (event: SelectChangeEvent) =&gt; {
      setEmployment(event.target.value as string);
      console.log(employment);
    };
  
    console.log(watch("title")); // watch input value by passing the name of it
  
    return (
      &lt;Box
        sx={{
          width: "414px",
          border: "1px solid #000",
          p: 2,
          borderRadius: 1,
          margin: "16px auto",
        }}
      &gt;
        &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
          &lt;Typography sx={{ my: "12px" }}&gt;Title:&lt;/Typography&gt;
          &lt;TextField
            placeholder="Ex: Sales Manager"
            fullWidth
            {...register("title")}
            sx={{ mb: 2 }}
          &gt;&lt;/TextField&gt;
          &lt;Divider /&gt;
          &lt;Typography sx={{ my: "12px" }}&gt;Employment type:&lt;/Typography&gt;
          &lt;InputLabel id="demo-simple-select-label"&gt;Employment Type&lt;/InputLabel&gt;
          &lt;Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={employment}
            label="Employment Type"
            onChange={handleChange}
            {...register("employment")}
            sx={{ mb: 2, width: "100%" }}
          &gt;
            &lt;MenuItem value={"full"}&gt;FullTime&lt;/MenuItem&gt;
            &lt;MenuItem value={"part"}&gt;PartTime&lt;/MenuItem&gt;
          &lt;/Select&gt;
          &lt;Divider /&gt;
          &lt;Typography sx={{ my: "12px" }}&gt;Company name:&lt;/Typography&gt;
          &lt;TextField
            placeholder="Ex: Microsoft"
            fullWidth
            {...register("company")}
            sx={{ mb: 2 }}
          &gt;&lt;/TextField&gt;
          &lt;Divider /&gt;
          &lt;Typography sx={{ my: "12px" }}&gt;Location:&lt;/Typography&gt;
          &lt;TextField
            placeholder="Ex: London, United Kingdom"
            fullWidth
            {...register("location")}
            sx={{ mb: 2 }}
          &gt;&lt;/TextField&gt;
          &lt;Divider /&gt;
          &lt;Typography sx={{ my: "12px" }}&gt;Date:&lt;/Typography&gt;
          &lt;TextField
            placeholder="Ex: Sales Manager"
            fullWidth
            {...register("startDate")}
            sx={{ mb: 2 }}
          &gt;&lt;/TextField&gt;
          &lt;TextField
            placeholder="Ex: Sales Manager"
            fullWidth
            {...register("endDate")}
            sx={{ mb: 2 }}
          &gt;&lt;/TextField&gt;
          &lt;Divider /&gt;
          &lt;Typography sx={{ my: "12px" }}&gt;Description:&lt;/Typography&gt;
          &lt;TextField
            fullWidth
            {...register("description")}
            sx={{ mb: 2 }}
          &gt;&lt;/TextField&gt;
        &lt;/form&gt;
      &lt;/Box&gt;
    );
  }
  
  export default ExprienceCreate;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>