DatePickerで選択した日付をstate管理したい

はじめに

入力した日付を配列でstate管理したい場面があったので簡単にまとめてみます。
以下のようなカレンダーから日付を選択してボタンをクリックすると、日付を配列でstate管理できるようにします。

console.logで日付を配列で管理できていることが確認できます。

やりかた

  const [date, setDate] = useState<Date[]>([]);
  const [newDate, setNewDate] = useState<Date | null>(new Date());

  const onChangeDate = (e: Date | null) => {
    setNewDate(e);
  };
  const onClickButton = () => {
    if (newDate !== null) {
      setDate([...date, newDate]);
    }
    console.log(date);
  };

  return (
    <>
      <Flex bg="gray.200" h="calc(100vh)" justify="center" align="center">
        <Box>
          <DatePicker
            dateFormat="yyyy/MM/dd"
            selected={newDate}
            onChange={(e) => {
              onChangeDate(e);
            }}
          />
        </Box>
        <Box>
          <Button
            colorScheme="blue"
            mr={3}
            onClick={() => onClickButton()}
            mt={2}
          >
            送信
          </Button>
        </Box>
      </Flex>
    </>
  );

おわりに

state管理にはやく慣れていきたいです。