Using React UseForm, issue while uploading image to the form, have registered the input file type with useForm,issue is found when required is given

Question

import React, { useState } from "react";
import "./ImageUpload.css";

import { useForm, useFormContext } from "react-hook-form";

function ImageUpload(props) {
  const [selectedImage, setSelectedImage] = useState([]);
  // const [imageFlag, setImageFlag] = useState(false);
  // const { formState: { errors }}=useForm({shouldFocusError:true})
  const { formState: { errors } } = props


  var arr = [];
  const { register, setValue, setError } = useFormContext();
  // const { input, placeholder,formState: { errors },register} = props;

  function showImage(event) {
    arr = [...selectedImage];
    {
      console.log("the length of arr", arr.length);
    }
    if (arr.length > 6) {
      alert("Maximum limit of images");
    } else {
      var imageURLobjects = event.target.files;

      for (var i = 0; i < imageURLobjects.length; i++) {
        arr.push(imageURLobjects[i]);
      }
      console.log("these are selected images", arr);
      setSelectedImage(arr);
    }

    // var url = URL.createObjectURL(imageURLobject)
    // setSelectedImage(url)


  }

  function RemoveImage(event, index) {
    var newArr = [...selectedImage];
    newArr.splice(index, 1);
    setSelectedImage(newArr);
    console.log("event", event);


  }
  // setValue("Images", selectedImage);
  // setValue("Images", selectedImage.length > 0 ? selectedImage : undefined);
  console.log("selectedImage", selectedImage);

  setValue("images", selectedImage.length > 0 && selectedImage);
  console.log("selectedImage", selectedImage);
  return (
    <div className="image-upload-container">
      <div className="added-photo-container">
        {/* <h6>{selectedImage&&selectedImage.length==0&&""}</h6> */}
        {selectedImage &&
          selectedImage.map(function (image, index) {
            console.log(image);
            return (
              <div key={index} className="added-photo">
                <img src={URL.createObjectURL(image)} alt="pic-not-uploaded" />
                <button type="button" onClick={(event) => RemoveImage(event, index)}>Remove</button>
              </div>
            );
          })}
      </div>
      <label htmlFor="upload-image">
        <input

          {...register("images", { required: true, onChange: showImage })}
          id="upload-image"
          type="file"
          multiple


        />


        <div className="add-photo-container">
          <img
            src={require("../../assets/img/add-photo.svg").default}
            alt="add-photo"
          />
        </div>
      </label>
      {console.log("errors", errors)}
      {errors.images && <p style={{ color: 'red', fontSize: "12px" }} className="error-message">This field is required!  Upload an Image</p>}
    </div>
  );
}

export default ImageUpload;

`This is the code, when required true is given, even when the image is uploaded the error is caught, but if required is removed, the image uploaded can be submitted Is it something related to useFormContext that im using?

I can also see changes i take register from the props that i passed through, error is not caught and image required is not checked there too

What i want is, that i want the Image to be set required and also along with it, it needs to be uploaded too`