[React] DesktopDatePickerの初期値をNullに指定して、初期画面でラベルを表示させる方法

結論　（※これだけだと警告が起こります）

DesktopDatePickerのデフォルトの値をundefinedにして、label属性に任意の文字列を入力する

これ↓

import { Box, Stack, TextField, Button } 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, Controller } from "react-hook-form";

import { addDays } from "date-fns";

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

function App() {
    const {
        register,
        handleSubmit,
        control,
        setValue,
        formState: { errors },
    } = useForm<Todo>({
        defaultValues: {
            name: "",
            deadline: undefined,　// ← 追記
        },
    });

    const onSubmit = (data: Todo) => {
        console.log(data);
    };

    return (
        <LocalizationProvider adapterLocale={ja} dateAdapter={AdapterDateFns}>
            <Box sx={{ width: "100vw" }} component="form" onSubmit={handleSubmit(onSubmit)}>
                <Stack sx={{ width: "20%", margin: "30px auto" }} spacing={3}>
                    <Controller
                        control={control}
                        name="deadline"
                        render={({ field: { onChange, value } }) => (
                            <DesktopDatePicker
                                {...register("deadline")}
                                label="LIMIT" //　←追記
                                minDate={new Date()}
                                maxDate={addDays(new Date(), 10)}
                                value={value}
                                onChange={onChange}
                                slotProps={{ textField: { required: true } }}
                            />
                        )}
                    />
                    <Button type="submit">send</Button>
                </Stack>
            </Box>
        </LocalizationProvider>
    );
}

export default App;

問題が起こる

しかし、これだと値を変更した際に以下のような警告が出てくると思います。

MUI: A component is changing the uncontrolled value of a picker to be controlled.

どうやら、制御されていない値（undefined）をMUIが制御できるように変更したっぽいです。
そうなるとこのような警告が出てきます。

これを解消します。

警告の解消

以下のようにuseFormのgetValuesを使用して解消する。

import { Box, Stack, TextField, Button } 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, Controller } from "react-hook-form";

import { addDays } from "date-fns";

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

function App() {
    const {
        register,
        handleSubmit,
        control,
        setValue,
        getValues, // ←　追加
        formState: { errors },
    } = useForm<Todo>({
        defaultValues: {
            name: "",
            deadline: undefined,
        },
    });

    const onSubmit = (data: Todo) => {
        console.log(data);
    };

    return (
        <LocalizationProvider adapterLocale={ja} dateAdapter={AdapterDateFns}>
            <Box sx={{ width: "100vw" }} component="form" onSubmit={handleSubmit(onSubmit)}>
                <Stack sx={{ width: "20%", margin: "30px auto" }} spacing={3}>
                    <Controller
                        control={control}
                        name="deadline"
                        render={({ field: { onChange, value } }) => (
                            <DesktopDatePicker
                                {...register("deadline")}
                                label="LIMIT"
                                minDate={new Date()}
                                maxDate={addDays(new Date(), 10)}
                                value={getValues("deadline") || null} // ←　変更
                                onChange={onChange}
                                slotProps={{ textField: { required: true } }}
                            />
                        )}
                    />
                    <Button type="submit">send</Button>
                </Stack>
            </Box>
        </LocalizationProvider>
    );
}

export default App;

これで、警告は消えたかと思います。

終わり

個人的に結構詰まってしまったので、備忘録として書きました。
なんか間違ってたら教えてください。