How to show file name on Edit form in react

I have a dynamic form, where i can add different type of fields (text, links, images, documents)

When i create the form, and i add a field i have in the image and document field the option to select file.

But then when i go later to my form to edit the fileds, the field is a string and i have lost the choose file button.

I would like that, when i comeback to my form and edit, see the file name and have the option to choose the file without delete completely the field and have to add a new field.

I know that when i retrieve a field, the input in the form can not be type='file' and has a string value. For the programatically problem.

i have this code in the form now.

<div className='col-4'>
      {input.image_lateral[0].path_image_lateral !== '' ?
     (
     <input
         placeholder={input.image_lateral[0].path_image_lateral || ''}
        id={i}
        className='form-control mt-3' 
         defaultValue={input.image_lateral[0].path_image_lateral || ''}
          name="path_image_lateral"
          onChange={handleChange}
          type="text"
           />
           ) :
     <input
        placeholder='path_image_lateral'
       id={i}
        className='form-control mt-3'
        name="path_image_lateral"
        onChange={handleChange}
        type="file"
         />
        }
 </div>

in my handleChange i have: (it's too long, because are 5 types of fields that i can add in my form dynamically)

let handleChange = (e) => {
    const index = e.target.id;
    const file = e.target.files;
    console.log('File', file);
    let elementChanged = e.target.name;

    if (elementChanged === 'title_image_lateral') {
      setLateraItems(s => {
        itemData = s.slice();
        itemData[index].image_lateral[0][elementChanged] = e.target.value;
        console.log(itemData);
        return itemData;
      });
    } else if (elementChanged === 'path_image_lateral') {
      console.log('ESTOY EDITANDO IMAGEN');
      if (elementChanged === 'path_image_lateral') {
        checkFile(file[0]);
        inputValue.current = file[0].name;
      }
      setLateraItems(s => {
        itemData = s.slice();
        itemData[index].image_lateral[0][elementChanged] = file[0].name; 
        return itemData;
      });
    } else if (elementChanged === 'title_link' || elementChanged === 'link') {
      setLateraItems(s => {
        itemData = s.slice();
        itemData[index].links[0][elementChanged] = e.target.value;        
        return itemData;
      });
    } else if (elementChanged === 'document_lateral') {
      if (elementChanged === 'document_lateral') {
        checkDocument(file[0]);
      }     
      setLateraItems(s => {
        itemData = s.slice();
        itemData[index][elementChanged] = file[0].name;
        console.log(itemData);
        return itemData;
      });
    } else {
      setLateraItems(s => {
        itemData = s.slice();
        itemData[index][e.target.name] = e.target.value;
        console.log(itemData);
        return itemData;
      });
    }
  };

I would like to have the option to change the file when edit. I did see things about useReff but i can not see the way to use.

Thanks for your time.