I made a custom file input in my app. It's working like a charm but when the file is uploaded, the custom file input is still showing the name of the file, which is a problem.

I tried to pass a state from parent component in order to reset the name displayed but, for some reason, the child prop does not update with the parent state and I don't know why.

Here's the custom file input :

export default function CustomInput({
  disabler,
  setUpperLevelFile,
  previousName,
  typeOfFiles,
  lastInput,
  reset,
}) {
  const [fileUpload, setFileUpload] = useState(null);


  useEffect(() => {
    if (lastInput) {
      setUpperLevelFile && setUpperLevelFile(fileUpload, lastInput);
    } else {
      setUpperLevelFile && setUpperLevelFile(fileUpload);
    }
  }, [fileUpload]);

  useEffect(() => {
    reset && setFileUpload(null);
    console.log("custom input use effect : ", reset);
  }, [reset]);

  return (
    <label className="customInputLabel">
      <CustomButton
        buttonInnerText="browse"
      />
      <p>
        {(fileUpload &&
          `${fileUpload.name}, (${sumParser(fileUpload.size)})`) ||
          (previousName && previousName) ||
          "chose a file"}
      </p>
      <input
        type="file"
        name="realInput"
        className="innerFileInput"
        accept={typeOfFiles && typeOfFiles}
        disabled={disabler && !disabler}
        style={{ display: "none" }}
        onChange={(e) => {
          setFileUpload(e.target.files[0]);
        }}
      />
    </label>
  );
}

And here is some of the parent code :

export default function ImportFiles(props){
...
  const [resetInputs, setResetInputs] = useState(false);

const returningInputs = () => {
    let stockInputs = [];
    for (let i = 0; i < filesCounter; i++) {
      stockInputs.push(
        <CustomInput
          key={`custom input ${i}`}
          setUpperLevelFile={handlingInputChange}
          lastInput={i === filesCounter - 1}
          reset={resetInputs}
        />
      );
    }
    setFilesInputs(stockInputs);
  };

const handlingPostingFiles = () => {
    postingFiles(uploadFiles, setUploadStatus);
    setResetInputs(true);
  };

useEffect(() => {
    console.log("edit packages use effect : ", resetInputs);
  }, [resetInputs]);
...
return(
...
{filesInputs}
...
)

The console.log in parent component shows that the state is updated but the one in CustomInput doesn't trigger after first render. So it's not updated.