Inertia Js and React Js > form callback is not triggered

Hi Artisans, Please I am facing an issue not sure if I missed something with react setup Please any heads-up will help

// Laravel 9.37
// React 18.2.0
// React-dom 18.2.0
// inertia react 0.8.1
// inertia js 0.11.0
// inertia-laravel 0.6.3

import React, {useEffect, useState} from 'react';
import {Head, useForm} from "@inertiajs/inertia-react"; 

const {data, setData, post, processing, errors, transform} = useForm({
    first_name: ' ',
    last_name:  ' ',
    title:  ' ',
    country_id: ' ',
    state_id: ' ',
    bio: ' ',
  })

function submit(e) {
    e.preventDefault()
    post(route('profile.update', {
    // preserveState: true, tried with use state still didn't work 
	// this doesn't work as well, it seems the page actually refreshes after posting the data 
      preserveScroll: true,
		
	//None of these works
      onSuccess: () => console.log('I am successful'),
      wasSuccess: () => console.log('This was successful'),
      recentlySuccessful: () => console.log('Recently successful'),
    }))
  }

Laravel Backend

     public function update(Request $request, Profile $profile) {
            $request->validate([
                'first_name' => 'required',
                'last_name' => 'required',
            ]);

            $profile->update([
                'first_name' => $request->input('first_name'),
                'last_name' => $request->input('last_name'),
                'title' => $request->input('title'),
                'bio' => $request->input('bio'),
                'country_id' => $request->input('country_id'),
                'state_id' => $request->input('state_id'),
			])

		return back()

Data will be updated, and the page component end will jump back to the top If I flash data it will be available in usePage().props not sure why form help is not working I have a similar setup with Vue 3 works fine but not sure what I missed in React