Need help Inertia Vue Developer, this.$inertia.form

Good day programmers. I just wanna ask for help about my inertia vue 3 project little bit of typeScript. I have a create and update button with modal, now I made just one form(modal) for both of them and I use this.$inertia.form for storing and retrieving data, now my problem is that I cant seem to reset the form whenever I close the modal when I go first in editModal(display data) to createModal()- It still displayed the data in createModal() form, I tried the this.form.reset() in closeModal function but doesnt work. I know its kinda basic for you guys this kinda problem but I appreciate your answer Thanks.

data(){
    form: this.$inertia.form({
                firstName: '',
                lastName: '',
                gender: 'Male',

            })}

methods:{
       editModal(rider: Rider) {

            this.form = this.$inertia.form(rider);

            //when assigning this.form to rider object, it cannot 
        be reset!
            this.showModal = true;

            this.editMode = true;
        },
        createModal(){
            this.showModal = true;
        },

        closeModal() {
            this.showModal = false;
            this.editMode = false;
            this.form.reset();

        },
}