using refs works fine on dev mode but not working in build mode in Vue composition API

this is my html:

<input ref="file" type="file" accept="image/*" capture="environment" style="display:none" /><v-btn @click="openCamera()">take photo</v-btn>

I'm trying to open camera(or choose a file) with a custom button:

<script setup>import { ref } from 'vue';const file = ref(null)function openCamera() {    file.value[0].click()}<script>

everything goes fine when I'm running the app using yarn dev (vite) but when I build it using yarn build and serve it on server the app throws this error:

Cannot read properties of null (reading '0')

and the file is null.

Any help would be appreciated.Thanks