react-hook-formとyupを用いたDatePickerのバリデーション

Question

前提・実現したいこと

現在React(Next.js)を使って、日付の入力フォームを作成しています。
その際に、react-hook-formを使っていますが、material-uiのDatePickerにて入力した値の処理がうまくいきません。
バリデーションにはyupを用いています。
入力される日付としては、nullが許容されるので
nullか正しい日付の場合のみ、onSubmit関数内でAPIを叩く形にする必要があります。

問題点

nullを許容するため、yup.date().nullable()としていますが、フォームで何も入れず登録ボタンを押すと、エラーとなります。
また、正しくない日付(例えば１だけ)を入力した場合にもバリデーションが通り、onSubmit関数が実行されています。

これを所望の「正しい日付かnullのみ許容」とするにはどうすれば良いでしょうか？

該当のソースコード

/**@jsxImportSource @emotion/react */
import { yupResolver } from '@hookform/resolvers/yup/dist/yup';
import React, { useState } from 'react';
import { TextField, Button } from '@mui/material';
import { SubmitHandler, useForm } from 'react-hook-form';
import * as yup from 'yup';
import { DatePicker } from '@mui/lab';
import AdapterDateFns from '@mui/lab/AdapterDateFns';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import ja from 'date-fns/locale/ja';
import { setDate } from 'date-fns';

interface SampleFormInput {
  start_date: string;
}

// バリデーション
const schema = yup.object({
  start_date: yup.date().nullable().typeError('正しい日付を入力してください'),
});

const Test = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<SampleFormInput>({
    resolver: yupResolver(schema),
  });

  const onSubmit: SubmitHandler<SampleFormInput> = async (data) => {
    // APIを叩いて登録
  };

  const [formStartDate, setFormStartDate] = useState('');
  return (
    <>
      <LocalizationProvider dateAdapter={AdapterDateFns} locale={ja}>
        <DatePicker
          label="日付"
          mask="____-__-__"
          inputFormat="yyyy-MM-dd"
          value={formStartDate}
          onChange={(newValue) => {
            setFormStartDate(newValue);
          }}
          renderInput={(params) => (
            <>
              <TextField
                {...params}
                {...register('start_date')}
                error={'start_date' in errors}
                helperText={errors.start_date?.message}
                variant="standard"
              />
            </>
          )}
        />
      </LocalizationProvider>
      <Button onClick={handleSubmit(onSubmit)}>登録</Button>
    </>
  );
};

export default React.memo(Test);