How to get access to the inner input html element

[d1820]

Using AvField and adding a ref to it or trying to use the form to get access the in input does not seem to work

I always get back click is not a functon? Trying to get these components to work with any type of drag and drop for the file input type has so far been a nightmare. any guidance would be welcomed.

 const fileField = createRef<HTMLInputElement>();
 const showFileDialog = () => {
    const f = batchFormRef.current.getInput('fileInput'); //getInput is not a function
   f.click();
//or
fileField.current.click(); //click is not a function

  };
 <div  onClick={showFileDialog}>
<AvField
            type="file"
            name="fileInput"
            multiple
            accept="image/*"
            onChange={handleFileChange}
            required
            ref={fileField}
            errorMessage="Images are required to create a batch"
            className={styles.fileinput}
          />
</div>