TypescriptとNextjsを使用しています。 マークダウン形式のメモを作成しようとしています。 Reactmarkdown v8とFirebasev9 storageを使用して、プレビューと保存ができるようにしてください

import React, { useState } from "react";
import ReactMarkdown from "react-markdown";

export default function Home() {
  const [markdown, setMarkdown] = useState("");
  const [preview, setPreview] = useState("");

  const handleChange = (e) => {
    setMarkdown(e.target.value);
    setPreview(e.target.value);
  };

  const handleClick = () => {
    setPreview("");
  };
  return (
    <>
      <div className="markdown preview">
        <textarea
          type="text"
          value={markdown}
          onChange={handleChange}
          placeholder="Markdownを入力してください"
          className="markdown__area"
        />
        <ReactMarkdown source={preview} />
      </div>
      <button onClick={handleClick}>クリア</button>
    </>
  );
}