React 適当な課題

import { useState } from "react";

const nishikawa = () => {
  const [text, setText] = useState("");
  const [commentList, setCommentList] = useState<string[]>([]);
  const handleSubmit = () => {
    if (text) {
      setCommentList((prevState) => [...prevState, text]);
      setText("");
    }
  };
  return (
    <div className="max-w-6xl mt-12 px-6 mx-auto">
      <textarea
        className="border-2 border-gray-300 block mb-3 px-2 py-2"
        value={text}
        onChange={(e) => {
          setText(e.target.value);
        }}
        cols={40}
        rows={5}
      ></textarea>
      <div className="flex gap-4">
        <button onClick={() => setCommentList([])} className="px-3 py-2 bg-blue-600 text-white">
          クリア
        </button>
        <button onClick={handleSubmit} className="px-3 py-2 bg-red-500 text-white">
          コメントする
        </button>
      </div>
      {commentList.map((comment) => (
        <div className="border border-black w-96 my-2 py-2 px-4 hover:bg-blue-200">{comment}</div>
      ))}
    </div>
  );
};

export default nishikawa;