File input state React-hook-form

Question

The react hook form is not able to change the state of my file input below is the code

import React, { useRef } from "react";
import { useForm } from "react-hook-form";
import { toast } from "react-toastify";
import { MdCloudUpload } from "react-icons/md";

const Modal = ({ onClose }) => {
  const ref = useRef();
  const closeModal = (e) => {
    if (ref.current === e.target) {
      onClose();
    }
  };

  const Initial = { title: "", content: "", picture:"" };

  const {
    register,
    handleSubmit,
    reset,
    formState: { errors, isSubmitting },
  } = useForm(Initial);

  const createPost = (data) => {
    console.log(data);
    toast.success("Blog Posted !!", {
      position: "top-center",
      autoClose: 2000,
    });
    reset();
    onClose();
  };

  return (
    <div
      ref={ref}
      onClick={closeModal}
      className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm flex justify-center items-center z-20 overflow-auto"
    >
      <div className="flex flex-col gap-5 text-white">
        <div className="bg-gradient-to-r from-[#ad5389] to-[#753a88] rounded-xl px-20 py-10 flex flex-col gap-5 items-center mx-4 w-[70vw]">
          <h1 className="text-2xl font-extrabold">Share Your Thoughts !!</h1>
          <form
            onSubmit={handleSubmit(createPost)}
            className="w-full px-6 py-4 overflow-hidden flex flex-col gap-10"
          >
            <div className="flex flex-col gap-2">
              <input
                type="text"
                placeholder="Title"
                {...register("title", {
                  required: true,
                  minLength: {
                    value: 3,
                    message: "Title should be atleast 3 characters long",
                  },
                })}
                className="w-full px-5 py-3 rounded-lg focus:outline-none text-black"
              />
            </div>
            <div className="flex flex-col gap-2 ">
              <textarea
                type="text"
                placeholder="Content"
                rows={5}
                {...register("content", {
                  required: true,
                  minLength: {
                    value: 50,
                    message: "Content should be atleast 50 characters long",
                  },
                })}
                className="w-full px-5 py-3 rounded-lg focus:outline-none text-black"
              ></textarea>
            </div>
            <div className="flex flex-col gap-2">
              <span className="text-lg font-bold">Upload Image</span>
              <input
                type="file"
                id="fileInput"
                accept="image/*"
                {...register("picture")}
              />
              <label
                htmlFor="fileInput"
                className="bg-transparent border-solid border-2 px-16 py-2 rounded-xl font-bold transition ease-in-out hover:bg-white hover:text-[#753a88] duration-500 flex items-center justify-center gap-5 cursor-pointer"
              >
                <MdCloudUpload size={25} />
                Upload
              </label>
            </div>
            <div className="mb-3 text-sm font-bold max-w-md h-[2vh]">
              {errors.title && (
                <div className="text-[#ff0000]">{errors.title.message}</div>
              )}
              {errors.content && (
                <div className="text-[#ff0000]">{errors.content.message}</div>
              )}
            </div>
            <div className="flex justify-center gap-5">
              <button
                onClick={onClose}
                disabled={isSubmitting}
                className="bg-transparent border-solid border-2 px-16 py-2 rounded-xl font-bold transition ease-in-out hover:bg-white hover:text-[#9f4544] duration-500"
              >
                Cancel
              </button>
              <button
                disabled={isSubmitting}
                type="submit"
                className="bg-transparent border-solid border-2 px-16 py-2 rounded-xl font-bold transition ease-in-out hover:bg-white hover:text-[#753a88] duration-500"
              >
                Post
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
};

export default Modal;

The {...register('picture')} is not working as expected. It should have handled the state of the file upload by updating the picture in the data object. But only the states of title and the content are being updated, not of the picture. The picture is being uploaded correctly I checked it using the watch(). I don't know why the state is not being updated.