How to make clickable images that acts like input file

I have two input files and two images not I am trying to create a clickable image that will act like an input file and store the file name in it using Vue 3 but I keep on getting Uncaught TypeError: Cannot read properties of null (reading 'click') error when I click on the image

Here is my code

 <template>
 <input class="form-control" type="file" @change="handleFileUpload($event, 'image1')"ref="fileInputRefs[0]" style="display: none;">
 <img src="front.png" class="images" @click="handleImageClick(0)">

 <input class="form-control" type="file" @change="handleFileUpload($event, 'image1')"ref="fileInputRefs[1]" style="display: none;">
 <img src="back.png" class="images" @click="handleImageClick(1)">


<script setup>
  const fileInputRefs = [
             ref(null),
             ref(null)
    ] 

 const handleImageClick = (index) => {
   fileInputRefs[index].value.click()
 }

const handleFileUpload = (event, id) => {
const fileList = event.target.files
const reader = new FileReader()
reader.readAsDataURL(fileList[0])
 reader.onload = () => {
  if (id === 'image1') {
     file1.value = {
      file: fileList[0],
     dataUrl: reader.result
   }
  } else if (id === 'image2') {
  file2.value = {
    file: fileList[0],
    dataUrl: reader.result
    }
  }
 }
}



</script>