Typescriptでinputフォームの値を取得する

Typescriptの勉強を最近始めたのですが、stringとかarrayとかの変数の型周りは他にも静的型付け言語をやっていたので特に問題なくは入れたものの、イベント周りの型が結構鬼門でタイトル通りの簡単なことをしたいだけなのに割とハマってしまい、ベストプラクティスが分かりませんでした...

そんなTypescriptを同じく始めたばかりのどなたかに刺されば幸いです。

App.tsx

import { useState, useEffect, useRef, ReactEventHandler } from "react";

type TodoType = {
  id: number;
  todo: string;
  isDone: boolean;
};

const App: React.FC = () => {
  const [text, setText] = useState<string>("");
  const [todos, setTodos] = useState<TodoType[]>([]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setText(e.target.value);
  };
  const handleClick = (): void => {
    setTodos([
      ...todos,
      { id: todos.length++, todo: text, isDone: false }
    ]);
  };

  return (
    <>
      <input
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChange(e)}
        type="text"
      />
      <button onClick={(): void => handleClick()}>Click me</button>
      {todos.map((i) => (
        <li key={i.id}>{i.todo}</li>
      ))}
    </>
  );
};
export default App;

onClickについては別にイベントから値を受け取っているわけではないので特に問題ではないのですが、onChangeについてはevent.target.valueからの値を受け取ってstateに保存したかった場合に、イベント型としてChangeEvent<HTMLInputElement>を渡せばいけるのですが、なぜかこれにたどり着くまでに数時間溶かしました...(とはいえTypescript周りは親切なので、xxの型はoo型に渡せません、というエラーが出ればoo型に修正して渡してやれば良いだけなので大分分かりやすいです。)

イベントはReact.イベント型としてやればインポートも必要なく使えます。