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

Question

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