Hello, can you please fix this code ```import { useEffect, useState } from "react";
import Sidebar from "@components/admin/Sidebar";
import Link from "next/link";
import InsertPhotoIcon from "@mui/icons-material/InsertPhoto";
import ArrowBackIosRoundedIcon from "@mui/icons-material/ArrowBackIosRounded";
import { API_URL } from "src/helpers/network";
import secureLocalStorage from "react-secure-storage";

export default function AddBlog() {
  const [answer, setAnswer] = useState({
    category: "",
    cover_image: "public/arrowLeft.png",
    title: "LLAL",
    content: "LALAL",
  });
  const [selectedFile, setSelectedFile] = useState(null);
  const [categories, setCategories] = useState([]);

  useEffect(() => {
    fetchCategories();
  }, []);

  const fetchCategories = async () => {
    try {
      const response = await fetch(API_URL + "/admin/blogs/category/list");
      const data = await response.json();
      setCategories(data);
    } catch (error) {
      console.error("Error fetching categories:", error);
    }
  };

  const handleFileChange = (event) => {
    const file = event.target.files[0];
    setSelectedFile(file);
    setAnswer((prev) => ({
      ...prev,
      cover_image: file,
    }));
  };

  console.log(answer);

  const handleChanges = (e) => {
    const { name, value } = e.target;
    setAnswer((prev) => ({
      ...prev,
      [name]: value,
    }));
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    console.log(selectedFile);
    const token = secureLocalStorage.getItem("token");
    console.log("token", token);
    const formData = new FormData();
    formData.append("cover_image", selectedFile);
    formData.append("title", answer.title);
    formData.append("content", answer.content);
    formData.append("category", answer.category);
    const createReq = await fetch(API_URL + "/admin/blogs/create", {
      method: "POST",
      headers: {
        Authorization: "Bearer " + token,
      },
      body: formData,
      mode: "cors",
    });
  };
  return (
    <>
      <div className="w-screen flex">
        <div className="flex-none">
          <Sidebar />
        </div>
        <div className="flex-1 h-screen overflow-auto px-10 py-5">
          <Link href="/admin/manage/blog">
            <a className="font-semibold text-lg">
              <ArrowBackIosRoundedIcon className="mr-3" />
              Add Blog
            </a>
          </Link>
          <div className="container mx-auto mt-10 w-9/12">
            <form className="flex flex-col">
              <label htmlFor="blogId" className="font-semibold mb-2 mt-5">
                Blog ID
              </label>
              <input
                type="text"
                id="blogId"
                placeholder="Input Blog ID"
                className="outline-none border border-slate-400 w-full px-3 py-3 rounded-xl text-sm"
              />
              <label htmlFor="title" className="font-semibold mb-2 mt-5">
                Title
              </label>
              <input
                type="text"
                id="title"
                name="title"
                placeholder="Input Title Name"
                className="outline-none border border-slate-400 w-full px-3 py-3 rounded-xl text-sm"
                value={answer.title}
                onChange={handleChanges}
              />
              <label htmlFor="desc" className="font-semibold mb-2 mt-5">
                Description
              </label>
              <textarea
                name="content"
                id="desc"
                rows="5"
                placeholder="Write a description"
                className="outline-none border border-slate-400 w-full px-3 py-3 rounded-xl text-sm"
                value={answer.content}
                onChange={handleChanges}
              ></textarea>
              <label htmlFor="category" className="font-semibold mb-2 mt-5">
                Category Article
              </label>
              <select
                name="category"
                id="category"
                className="outline-none border border-slate-400 w-full px-3 py-3 rounded-xl text-sm text-slate-600"
                value={answer.category}
                onChange={handleChanges}
              >
                <option value="" className="font-bold">
                  Choose Category Article
                </option>
                {categories.map((category) => (
                  <option key={category.id} value={category.name}>
                    {category.name}
                  </option>
                ))}
              </select>
              <div className="mt-5 flex">
                <div className="flex-1 mr-5">
                  <label htmlFor="blogDate" className="font-semibold mt-5">
                    Date & Time
                  </label>
                  <input
                    type="date"
                    id="blogDate"
                    className="outline-none border border-slate-400 w-full px-3 py-3 rounded-xl text-sm mt-2"
                  />
                </div>
                <div className="flex-1">
                  <label htmlFor="author" className="font-semibold mb-2 mt-5">
                    Author
                  </label>
                  <input
                    type="text"
                    id="author"
                    placeholder="Input Author"
                    className="outline-none border border-slate-400 w-full px-3 py-3 rounded-xl text-sm mt-2"
                  />
                </div>
              </div>
              <label htmlFor="tags" className="font-semibold mb-2 mt-5">
                Tags
              </label>
              <input
                type="text"
                id="tags"
                placeholder="Input Tags"
                className="outline-none border border-slate-400 w-full px-3 py-3 rounded-xl text-sm"
              />
              <label className="font-semibold mb-2 mt-5">Blog Image</label>
              <input
                type="file"
                id="image"
                accept="image/*"
                className="hidden"
                onChange={handleFileChange}
              />
              <label
                htmlFor="image"
                className="border border-slate-400 w-full rounded-lg h-fit"
              >
                <div className="flex gap-3 p-4 cursor-pointer">
                  <InsertPhotoIcon className="text-neutral-400 text-6xl" />
                  <div className="flex flex-col justify-center">
                    <h1 className="font-semibold text-md">Upload Image</h1>
                    <h1 className="text-sm font-thin">
                      Format .JPG or .PNG (Max. 2MB)
                    </h1>
                  </div>
                </div>
              </label>
              <div className="flex gap-4 flex-row-reverse mt-7">
                <button
                  type="button"
                  className="w-48 py-3 flex items-center justify-center rounded-full bg-emerald-700 text-white font-medium"
                  onClick={handleSubmit}
                >
                  Save Blog
                </button>
                <button
                  type="button"
                  className="w-48 py-3 flex items-center justify-center rounded-full bg-slate-300 text-slate-500 font-medium"
                >
                  Cancel
                </button>
                <button
                  type="button"
                  className="w-48 py-3 flex items-center justify-center rounded-full mr-auto border text-yellow-700 font-semibold border-yellow-800"
                >
                  Save as Draft
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </>
  );
}
```