Form not sending data, error: TypeError: Cannot read properties of undefined (reading 'default') on Laravel with Vue Inertia

We're currently creating a web app but I'm having trouble passing the data in my search bar into my controllers. We have tested it and it seems that the problem is in the front end side where in the searchBar isn't filled with anything even if the user have searched for something and clicked the button. It's always just null that is passed on the controller. Basically, what we want to do in this page is to let the users search for student_id, and then the retrieve student info will get back on the page with the variable containing the information.

We're using a Parent and Child component for the pages but if it's better to just use one single page, we can compromise as long as we can make it work.

js/Pages/Index/Applicant.vue (Parent)

<template>
    <cApplicant :students="students"/>
</template>

<script>
    import cApplicant from '../components/Applicant/cApplicant.vue';
    export default {
        name: 'Applicant',
        components:{cApplicant},
        props:{
           students: Object
        },
    }
</script>

<style>
    body{
        margin: 0;
        padding: 0;
    }
</style>

js/Pages/components/Applicant/cApplicant.vue (Child Component)

<template>
    <Navbar />
    <section id="sec1">
        <div class="container-lg">
            <div class="row justify-content-center">
                <div class="text-center">
                    <h1 class="fw-bold text-dark">New Applicant</h1>
                    <p class="fw-semibold text-secondary">Add and record new student.</p>
                    <button @click="btnBack" class="btn btn-warning text-white px-4">Back</button>
                </div>
                <div class="col-md-6 mt-5">
                    <form @click.prevent="btnSearch">
                        <div class="input-group ps-5">
                            <input type="text" class="form-control border border-danger shadow-none rounded" placeholder="Student Number" v-model="form.searchBar">
                            <button type="submit" class="btn btn-secondary ms-2 rounded">Search</button>
                        </div>
                    </form>
                    
                    <form v-if="students">                       
                        <div class="input-group mt-3">
                            <input type="text" class="form-control border border-danger shadow-none rounded me-2" :value="students?.fullname" placeholder="Fullname" readonly>
                            <input type="text" class="form-control border border-warning shadow-none rounded mx-2" placeholder="Year Level" readonly>
                            <input type="text" class="form-control border border-danger shadow-none rounded ms-2" placeholder="Department" readonly>
                        </div>
                    </form> 
                </div>
            </div>
        </div>
    </section>
     <--SOME MORE CODES HERE FOR OTHER STUFF-->
            </div>
        </section>
        <br><br><br>
        <Footer />
</template>

<script>
    import Navbar from '../Navbar/cNavbar.vue'
    import Footer from '../Footer/cFooter.vue'
    export default {
        name: 'cApplicant',
        components:{Navbar, Footer},
        data(){
            return{
                formLoop: Array(2).fill().map(() => ({
                    grades: '', 
                    units: '' ,
                  
                })),
                rGWA: 0,
            }   
        },
        methods:{
            btnBack(){
                this.$inertia.visit('/dashboard')
            },
            calculation() {
                console.log("Calculation triggered");
                let totalWeightedGrades = 0;
                let totalUnits = 0;
                this.formLoop.forEach(loop => {
                    let grade = parseFloat(loop.grades);  
                    let units = parseFloat(loop.units);  

                    if (!isNaN(grade) && !isNaN(units) && units > 0) {  
                        totalWeightedGrades += grade * units;
                        totalUnits += units; 
                    }
                });
                if (totalUnits > 0) {
                    this.rGWA = totalWeightedGrades / totalUnits;
                } else {
                    this.rGWA = 0;  
                }
            }
        },
        computed: {
            gradeStorage() {
                return this.formLoop.map(loop => loop.grades);
            },
        },
    }
</script>

<script setup>
    import {useForm} from '@inertiajs/vue3'
    import {router} from '@inertiajs/vue3'

    defineProps({
        students: Object
    })
    const form = useForm({
        searchBar: '',
    });
    function btnSearch(){
        router.get('search', {searchBar: form.searchBar});
    }
    
</script>

ApplicantController:

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;
use App\Models\Campus;
use App\Models\Student;
use App\Models\Subject;
use Illuminate\Http\Request;

class ApplicantController extends Controller
{
    
    public function search(Request $request){
     
        $studNum = $request->input('search');
            
        $students= Student::where('student_id', $studNum)
          ->first();
            return Inertia::render('applicant', ['students'=>$students])
           
        }

    }

}

web.php

   Route::get('/applicant', [FrontendController::class, 'applicant'])->name('applicant');
   Route::get('/search', [ApplicantController::class, 'search'])->name('search');

App.js

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-icons/font/bootstrap-icons.css';

createInertiaApp({
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
    return pages[`./Pages/${name}.vue`]
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

We tried manually storing student_id on the controller and it correctly retrieves the needed data, meaning it's really on the frontend side. We also noticed that it has props:null when searching base on the console log. We've also tried using dd($studNum) and it returns null, sometimes, we haven't even click on the button yet and it's already throwing us a null dd value.