Update in React with Inertia without reloading the page

Hello, i would really appreciate your help. I am using Inertia with ReactJs. I am at the show page of a model and i display each property with some information. I have decided to have a date field for when the property can go live, "live_at" and a boolean checkbox field for the availability of the property. I have placed these two fields in a modal as per below. <Modal show={openModal} onClose={closeModal}> <form onSubmit={submit} className="p-6"> <h2 className="text-lg font-medium text-gray-900 dark:text-gray-100"> Manage availablity of your property

                    <div className="relative mt-6">
                        <input
                            type="date"
                            name="live_at"
                            id="live_at"
                            ref={live_atInput}
                            placeholder="Live at"
                            value={data.live_at}
                            className="w-full px-3 py-3 border border-gray-300 rounded-md shadow peer shadow-gray-100 placeholder:text-transparent focus:border-gray-500 focus:outline-none"
                            autoComplete="off"
                            onChange={(e) =>
                                setData("live_at", e.target.value)
                            }
                        />
                        <label
                            htmlFor="live_at"
                            className="absolute top-0 left-0 px-1 ml-3 text-sm text-gray-500 transition-all duration-100 ease-in-out origin-left transform -translate-y-1/2 bg-white pointer-events-none font-popp peer-placeholder-shown:top-1/2 peer-placeholder-shown:ml-4 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-400 peer-focus:-top-0 peer-focus:ml-3 peer-focus:text-sm peer-focus:text-gray-800"
                        >
                            Live at
                        </label>

                        <InputError
                            message={errors.live_at}
                            className="mt-2"
                        />
                    </div>
                    <div className="relative mt-6">
                        <div className="relative">
                            <input
                                name="available"
                                type="checkbox"
                                className="opacity-0 sr-only peer"
                                id="toggle"
                                checked={data.available ? true : false}
                                value={data.available}
                                onChange={(e) =>
                                    setData("available", e.target.checked)
                                }
                            />
                            <label
                                htmlFor="toggle"
                                className="relative flex h-6 w-11 cursor-pointer items-center rounded-full bg-gray-400 px-0.5 outline-gray-400 transition-colors before:h-5 before:w-5 before:rounded-full before:bg-white before:shadow before:transition-transform before:duration-300 peer-checked:bg-indigo-500 peer-checked:before:translate-x-full peer-focus-visible:outline peer-focus-visible:outline-offset-2 peer-focus-visible:outline-gray-400 peer-checked:peer-focus-visible:outline-green-500"
                            >
                                <span className="sr-only">Enable</span>
                            </label>
                        </div>

                        <InputLabel htmlFor="available" value="Available" />

                        <InputError
                            message={errors.available}
                            className="mt-2"
                        />
                    </div>

                    <div className="flex justify-end mt-6">
                        <SecondaryButton onClick={closeModal}>
                            Cancel
                        </SecondaryButton>

                        <PrimaryButton
                            className="px-4 py-2 ml-3 text-white bg-black rounded-lg"
                            disabled={processing}
                        >
                            Update Availability
                        </PrimaryButton>
                    </div>
                </form>
            </Modal>

the function in laravel that handles the submit is: public function availability(Request $request, Property $property) { $request->validate([ 'live_at' => [ 'sometimes', 'after:' . Carbon::now()->format('d-m-Y') ], 'available' => ['sometimes'], ],['live_at.after' => 'The date should be after today']);

    $property->live_at = $request->live_at;
    
    if($request->available != $property->available){
        $isAvailable = $property->available;
        $property->update([
            'available' => !$isAvailable
        ]);
    }

    $property->save();

    return back();
}

I am getting the data from usePage().props const { property } = usePage().props;

i am also using the useForm helper from Inertia const { data, setData, processing, reset, put, errors, delete: destroy, } = useForm({ live_at: property.live_at, available: property.available, });

and the submit method in react is as follows: const submit = (e) => { e.preventDefault();

    put(route("property.availability", property.id), {
        onSuccess: () => {
            closeModal();
        },
        onFinish: () => reset(),
    });
};

I can submit successfully the changes to the back-end and i can see them on my database. But when i open the modal again i still have the old values. How can i update the values of the data without reloading the page? After submit and without reloading i have the correct data on the property prop coming from Laravel. I have used useEffect to update them but its then when my code breaks. Any help is appreciated and thanks in advance