そもそも下記のコードは何がしたいのか？

inputに入力した値を取り出してuseStateで管理したい。
なぜなら入力した値を用いて投稿だったり編集ができるから。

HogeHoge

const HogeHoge = () => {
  const [neko, setNeko] = useState({ title: '' })
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setNeko({
      ...neko,
      [e.target.name]: e.target.value,
    })
  }
  return (
    <div>
      <label htmlFor="title">タイトル</label>
      <input
        type="text"
        name="title"
        id="title"
        onChange={handleChange}
        value={neko.title}
      />
    </div>
  )
}
export default HogeHoge

まずuseStateを使ってnekoの初期値を設定しています。

ここではキーがtitleで値が空のオブジェクトを、nekoの初期値として設定しています。

HogeHoge

  const [neko, setNeko] = useState({ title: '' })

そしてsetNekoという更新関数を用いてnekoの値を更新

ここでnekoの初期値をスプレッド構文で展開しています。つまり ...nekoによって title: ''　が取り出されています。その空の値がsetNekoのオブジェクトに代入されています。要するにオブジェクトがクローンされています。
そして[e.target.name]: e.target.valueの値が挿入されていきます

HogeHoge


  const [neko, setNeko] = useState({ title: '' })
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNeko({
      ...neko,
      [e.target.name]: e.target.value,
    })
  }

オブジェクトクローンの例

const foo = { a: 1, b: 2 };
const bar = { ...foo }; // => { a: 1, b: 2 }

[e.target.name]: e.target.valueとは

inputタグのnameの値と、inputタグのvalueの値を指します。
今回はnameがtitleで、valueがneko.titleです。こうすることでinputタグが2個3個と増えてもname属性とvalue属性を参照しているので、入力値をstateで管理できます。
また、value属性は入力した値そのものを指します。つまり今回はnekoというオブジェクトのtitleの値が、inputタグのvalue属性になります。

HogeHoge

      <input
        type="text"
        name="title"
        id="title"
        onChange={handleChange}
        value={neko.title}
      />

nekoの出力をコンソールで見てみます

HogeHoge

  const [neko, setNeko] = useState({ title: '' })
  console.log(neko)
  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setNeko({
      ...neko,
      [e.target.name]: e.target.value,
    })
  }

最初は空の文字列ですが文字を入力すると、setNekoにvalue属性の値が渡ってきて、nekoが更新されていきます。
このnekoをAPI及びDBの通信に適用することで投稿機能や編集機能が作れます。