背景

react-hook-formとmuiのTextFieldを使ったプロジェクトで　onChangeを記述した瞬間にタイトルのようなエラーが発生した

エラーが起こったコード

①Error!のところでタイトルのようなエラーが起こってしまった…
※ DesktopDatePickerのところは今回は気にしないでください…🙇（多分minDateらへんにエラー出ます…）

import { Box, Stack, TextField } from "@mui/material";
import { DesktopDatePicker } from "@mui/x-date-pickers";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import ja from "date-fns/locale/ja";

import { useForm } from "react-hook-form";

import { addDays, format } from "date-fns";

interface Todo {
    name: string;
    deadline: Date;
}

function App() {
    const {
        register,
        handleSubmit,
        setValue,
        formState: { errors },
    } = useForm<Todo>({
        defaultValues: {
            name: "",
            deadline: new Date(),
        },
    });
    return (
        <LocalizationProvider adapterLocale={ja} dateAdapter={AdapterDateFns}>
            <Box sx={{ width: "100vw" }}>
                <Stack sx={{ width: "20%", margin: "30px auto" }} spacing={3}>
                    <TextField
                        multiline
                        placeholder="NAME"
                        onChange={(e) => setValue("name", e.target.value)} // ← ①Error!!!
                        {...register("name")}
                    />
                    <DesktopDatePicker
                        {...register("deadline")}
                        label="LIMIT"
                        minDate={new Date()}
                        maxDate={addDays(new Date(), 10)}
                    />
                </Stack>
            </Box>
        </LocalizationProvider>
    );
}

export default App;

対処法

useFormの{...register('...')}の後にonChangeを記述すれば解決した！

エラーが解消したコード

import { Box, Stack, TextField } from "@mui/material";
import { DesktopDatePicker } from "@mui/x-date-pickers";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
import ja from "date-fns/locale/ja";

import { useForm } from "react-hook-form";

import { addDays, format } from "date-fns";

interface Todo {
    name: string;
    deadline: Date;
}

function App() {
    const {
        register,
        handleSubmit,
        setValue,
        formState: { errors },
    } = useForm<Todo>({
        defaultValues: {
            name: "",
            deadline: new Date(),
        },
    });
    return (
        <LocalizationProvider adapterLocale={ja} dateAdapter={AdapterDateFns}>
            <Box sx={{ width: "100vw" }}>
                <Stack sx={{ width: "20%", margin: "30px auto" }} spacing={3}>
                    <TextField
                        multiline
                        placeholder="NAME"
                        {...register("name")}　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 // ←
                        onChange={(e) => setValue("name", e.target.value)}//　　← {...register('name')}よりも下にonChangeを記載した
                    />
                    <DesktopDatePicker
                        {...register("deadline")}
                        label="LIMIT"
                        minDate={new Date()}
                        maxDate={addDays(new Date(), 10)}
                    />
                </Stack>
            </Box>
        </LocalizationProvider>
    );
}

export default App;

参考

https://stackoverflow.com/questions/69683099/typescript-onchange-is-specified-more-than-once-so-this-usage-will-be