onChange Method of Input Type 'file' trigger all other onChange methods of input type 'file'

I have different onChange Methods for selecting different images and I also have different states for saving the file and for preview. When i click on first input button to select first image then it triggers the first onChange method and its function successfully calls. Its code is bellow:

const onChangeFrontImage = (e) => {
  if (e.target.files[0]) {
    console.log(e.target.files[0], 'console of front image')
    setFrontImage(e.target.files[0])
    console.log("picture: ", e.target.files[0]);
    const frontReader = new FileReader();
    frontReader.addEventListener("load", () => {
      setPreviewFront(frontReader.result);
    });
    frontReader.readAsDataURL(e.target.files[0]);
  }
}

<div className="box-1">
  <label
    htmlFor="file-input"
  >
    {
      previewFront ? <img src={previewFront} alt="icon" style={{ width: 50, height: 50 }} /> : <img src={Camera} alt="camera-icon" />
    }
    <p>Framifrån</p>
  </label>
  <Input
    type="file"
    id="file-input"
    className='img-file'
    onChange={(e) => onChangeFrontImage(e)}
  />
</div>

And now, when i click on the other input button to select the second image. It again trigger the First function that i have write for the first input even everything is different for both inputs like Function Names and states. Its code is below:

const onChangeSideImage = (e) => {
  if (e.target.files[0]) {
    console.log(e.target.files[0], 'console of side image')
    // setSideImage(e.target.files[0])
    // console.log("picture: ", e.target.files[0]);
    // const sideReader = new FileReader();
    // sideReader.addEventListener("load", () => {
    //     setPreviewSideImage(sideReader.result);
    // });
    // sideReader.readAsDataURL(e.target.files[0]);
  }
}

<div className="box-1">
  <label
    htmlFor="file-input"
  >
    {
      previewSideImage ? <img src={previewSideImage} alt="" style={{ width: 50, height: 50 }} /> : <img src={Camera} alt="camera-icon" />
    }
    <p>Sida</p>
  </label>
  <Input
    type="file"
    id="file-input"
    className='img-file'
    onChange={(e) => onChangeSideImage(e)}
  />

</div>

And consoles are here: