Sending file from vue form to controller,inertiajs

In my app I have a useForm and input models binded to that form on a vue component, on submit I send that form with inertia form.patch().The thing is whenever I add the file to the form nothing goes to the server and when it is not added all other attributes on the form goes exactly to the right place to controller. There is my vue script section:

<script setup>
import BreezeAuthenticatedLayout from "@/Layouts/Authenticated.vue";
import { Head,useForm } from "@inertiajs/inertia-vue3";
import {ref} from 'vue';

const props = defineProps(['Profile', 'User','UpdateUrl']);

const url = props.UpdateUrl;

const profile = props.Profile;
const user = props.User;

const image = ref(null)
const password = ref(null)
const password_confirmation = ref(null)

 

function setImage(e){
    image.value = e.target.files[0]
}

function submit(){
    const form = useForm({
        username: profile.username,
        title: profile.title,
        description: profile.description,
        url: profile.url,
        email: user.email,
        password: password.value,
        password_confirmation: password_confirmation.value,
        image: image.value,
    });
    
    form.patch(url)
}
</script>

I tried to console.log the form.image value on submit and the value was:

File {name: 'elliot.png', lastModified: 1654592309700, lastModifiedDate: Tue Jun 07 2022 11:58:29 GMT+0300 (GMT+03:00), webkitRelativePath: '', size: 105539, …} 
//seems like a valid file

The thing I don't get is,in the Inertia docs it says whenever a file exists in the form inertia automatically changes request to form data but I am not sure if it does that in my case