File type input is giving error in ReactJS?

Question

I am using file type input in ReactJS to take image file from the user. The state that I'm using to store it is give below.

const [frSignUpData, setFrSignUpData] = useState({
      name: '',
      email: '',
      img: '',
    })

and input field that I'm using is given below-

 <label htmlFor="img">Upload a photo :</label>
 <input 
   id="img"
   name="img"
   type='file'
   onChange={handleChange} 
   accept ="image/*" 
   multiple = {false}
 />

onChange function is given below-

function handleChange(e) {
    if(e.target.name == 'img'){
      setFrSignUpData(prevData => ({
        ...prevData,
       [e.target.name]: e.target.files[0]
      }))
    }

But as soon as this component render into website below error comes into console-

A component is changing a controlled input to be uncontrolled. This is likely caused by the value changing from a defined to undefined, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component

Error gone, when I made a different component for input field and passed the setFrSignUpData function as a prop to the component and imported that component. But I still want to know the cause ?

Note -: I read online that input type=file is uncontrolled so there's no need to pass value prop in input.