useRefで連想配列を使う(Typescript)

タイトル通りですが、意外に連想配列を渡す例がネットで見つからなくて困ったので、メモ程度に書いています。

App.tsx

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

const App: React.FC = () => {
  const [inputText, setInputText] = useState<string>("");
  const text = useRef<TodoType[]>([]);

  const changeText = () => {
    text.current.push({
      id: text.current.length++,
      todo: inputText,
      isDone: false
    });
  };

  const onChange = (e: React.ChangeEvent<HTMLInputElement>): void => {
    setInputText(e.target.value);
  };

  return (
    <>
      <input type="text" onChange={onChange} value={inputText} />
      <button onClick={changeText}>Change</button>
      <p>
        {text.current.map((i) => (
          <li key={i.id}>{i.todo}</li>
        ))}
      </p>
    </>
  );
};
export default App;