setValue() to custom file input not working with react hook form ?

[ahmedShawareb567]

import { forwardRef, useEffect, useState } from "react";
import { AppImage } from "../AppImage/Index";
import { SvgIcon } from "../SvgIcon/Index";
import "./imageInput.scss";

interface ImageInputInterfaceProps {
onChange: (e) => void;
onBlur: (e) => void;
name: string;
}

export const ImageInput = forwardRef<
HTMLInputElement,
ImageInputInterfaceProps

(({ onChange, onBlur, name }, ref) => {
const [placeHolder, setPlaceHolder] = useState("اختيار الملف");
const [currentImage, setCurrentImage] = useState(
"/images/image-placeholder.png"
);
const [currentValue, setCurrentValue] = useState("");

const randomId = Date.now();

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

return (

<label
className="imageInput-container"
htmlFor={imageInput-${randomId}}
>

اختيار الملف

{placeHolder}

  <div className="imageInput-preview mt-3">
    <AppImage src={currentImage} alt="placeholder-image" />
    <button className="imageInput-preview-close btn btn-primary d-flex align-items-center justify-content-center">
      <SvgIcon name="close" />
    </button>
  </div>

  <input
    className="d-none"
    id={`imageInput-${randomId}`}
    type="file"
    name={name}
    ref={ref}
    onChange={(e: any) => {
      setPlaceHolder(e.target.files[0].name);
      setCurrentValue(e);
      onChange(e);
    }}
    onBlur={onBlur}
  />
</div>

);
});

ImageInput.defaultProps = {
onChange: () => {},
onBlur: () => {},
name: "image-input",
};

[leapful]

@ahmedShawareb567 : Please provide a codesandbox url to re-produce the issue.