Save data submitted from a Form into a Store in Sveltekit

So I’ve got the following component working so far records/new/+page.svelte:

<script>
    import RecordForm from "../../../components/forms/RecordForm.svelte";
    import TrackForm from "../../../components/forms/TrackForm.svelte";
    import { enhance } from '$app/forms';

    export let data;
    export let form;

</script>

<RecordForm mode="new" formData={ {...data, ...form} } />

the above works more as a wrapper, the actual action happens in the RecordForm.svelte component:

<script>
export let mode="new";
export let formData;
</script>

<form method="POST" class="pt-10">
   <!-- a bunch of fields -->
<input
                        name="title"
                        id="title"
                        type="text"
                        value={ formData?.data?.title || "" }
                        class="input input-bordered input-lg w-full max-w-xs"/>

                <label for="title" class="label">
                    {#if formData?.errors?.title}
                        <span class="label-text-alt text-error">{ formData?.errors?.title[0]}</span>
                    {/if}
                </label>

   <div class="flex flex-row pt-10">
                <button type="submit" name="save-and-exit" class="btn btn-primary btn-lg">{ mode == "new" ? "Save and Exit" : "Update and Exit" }</button>
            </div>
</form>

For simplicity, I’ve left out all the fields involved in the form (including only one to showcase the structure of the inputs).
This form has it’s associated action in new/+page.server.js:

export const actions = {
    default: async ({ request, fetch }) => {

        // create API instance
        const recordAPI = new RecordAPI(fetch);

        // retrieve the data from the form
        const data = Object.fromEntries(await request.formData());

        // validate data and create DTO
        const record = recordDTO(data);

        // if errors returned from building the DTO (validation errors) then return the object.
        if (record?.errors && !emptyObject(record.errors)) {
            return {
                "data": record.data,
                "errors": record.errors,
            };
        }

        // save the data
        const response = await recordAPI.post(record);

        if (response.status == 200) {
            throw redirect(302, '/records')
        }

        return {
            data: record,
            "errors": response.errors,
        }

    }
}

So far so good, everything works as expected when the form is submitted.

I want to expand this functionality, and I want to add tracks to a given record. But I want to do this as part of the Record creation process but in a different page/component.

My initial thought is to have 2 buttons on the new Record page. One if the user wants to save the info as it is (without adding the tracks) and another one labeled Tracks that will redirect the user to a page where the tracks for a record can be added.

When the Tracks button is clicked, then we shouldn’t submit the form but save the data into a store, and redirect the user to the Tracks page. Once there the user adds a bunch of tracks and click on Save, at that point the tracks and the record data are merge and send to the backend for processing.

I want to save the record data in a store in case the user wants to go back to the Record page and update some data, so the info is put back in place.

The issue is that I cannot save data into a store from an action in sveltekit, so it has to be done in the client side.

I tried adding the button to the form:

 <div class="flex flex-row pt-10">
                <button type="button" on:click={submitForm} name="add-tracks" class="btn btn-primary btn-lg">{ "-> Tracks" }</button>
            </div>

and retrieve the data from the form in order to save it into the store:

const submitForm = (event) => {
      const data = new FormData(event.currentTarget);
      console.log("FORM DATA", data)
      return
    }

since the data is managed by the formData obj I also tried:

 const submitForm = (event) => {
      event.preventDefault();
      console.log("form data", formData)

      return

but this is not working. Nothing is being printed out.

Any ideas on how to approach this?