input type='month'でonChangeを使える様にしたいです。

Question

前提・実現したいこと

next jsでtypescriptを使用していて、
input type='month'でonchangeを使える様にしたいです。

発生している問題・エラーメッセージ

Type 'Dispatch<SetStateAction<Date>>' is not assignable to type '(event: ChangeEvent<HTMLInputElement>) => void'.
  Types of parameters 'value' and 'event' are incompatible.
    Type 'ChangeEvent<HTMLInputElement>' is not assignable to type 'SetStateAction<Date>'.
      Type 'ChangeEvent<HTMLInputElement>' is not assignable to type '(prevState: Date) => Date'.
        Type 'ChangeEvent<HTMLInputElement>' provides no match for the signature '(prevState: Date): Date'.

該当のソースコード

import React, { useState, useEffect } from 'react';
export default function Index() {
const [startAt, setStartAt] = useState(
        startOfMonth(new Date().setMonth(7)),
    );

function sampleDate(date, format) {
        format = format.replace(/YYYY/g, date.getFullYear());
        format = format.replace(
            /MM/g,
            ('00' + (date.getMonth() + 1)).slice(-2),
        );
        return format;
    }
return (
            <input
               type='month'
               value={sampleDate(startAt, 'YYYY-MM')}
               onChange={setStartAt}
             />

)
}

試したこと

inputの中を
onChanhe={sampleDate(setStartAt, 'YYYY-MM')}
としても同じエラーが発生しました。

Answer 1

エラーメッセージのとおりです。イベントとして受け取る関数は、引数にReact.ChangeEvent<HTMLInputElement>を渡しますが、setStartAtは引数としてDateを必要とする関数なので、この2つは一致しません。

自分で「React.ChangeEvent<HTMLInputElement>を受け取ってDateを生成し、setStartAtを呼ぶ」ようなコールバック関数を作成する必要があります。