How do I get this data from server.js file to +page.svelte file?

Question

I am trying to make a dynamic drop down base on what is selected I want to make a pocketbase collection getFulllist call and what ever data I get I want to return it to the frontend (+page.svelte) file where it will be displayed in a table.

I am using let export data; to get dynamic dropdown data to front end. the load function ( responsible for getting data for dropdowns) is returning { userData }; so in the frontend I am I when I am doing data.response I am getting undefined. Can someone please help me figure it out.

here is my +page.svelte code.

<script>
    import { enhance } from '$app/forms';
    export let data;
    let selectedUser = '';
    let selectedCourse = '';
    function handleUserChange(event) {
        selectedUser = event.target.value;
        selectedCourse = '';
    }
    function handleCourseChange(event) {
        selectedCourse = event.target.value;
    }
    async function showSelection() {
        console.log('Selected User:', selectedUser);
        console.log('Selected Course:', selectedCourse);
    }

    const linkTypeOptions = [
        { value: 'Internal', text: 'Internal' },
        { value: 'External', text: 'External' }
        // ... more options
    ];

    const linkResultOptions = [
        { value: 'Success', text: 'Success' },
        { value: 'Failure', text: 'Failure' }
        // ... more options
    ];
</script>

<div>
    <h1 class="text-white-700 text-center text-4xl font-bold">Select Client Data</h1>

    {#if data}
        <form
            action="?/userSelection"
            method="POST"
            use:enhance
            class="flex flex-col items-center space-y-4 p-10"
        >
            <select
                name="user"
                class="select select-accent w-full max-w-xs"
                value={selectedUser}
                on:change={handleUserChange}
            >
                <option disabled selected>Select a User</option>
                {#each data.userData as user}
                    <option value={user.user}>{user.user}</option>
                {/each}
            </select>
            {#if selectedUser !== ''}
                <select
                    name="course"
                    class="select select-accent w-full max-w-xs"
                    value={selectedCourse}
                    on:change={handleCourseChange}
                >
                    <option disabled selected>Select a Course</option>
                    {#each data.userData.find((user) => user.user === selectedUser)?.courses || [] as course}
                        <option value={course}>{course}</option>
                    {/each}
                </select>
            {/if}
            <button type="submit" on:click={showSelection} class="btn btn-primary">Get Data</button>
        </form>
    {:else}
        <p>Loading...</p>
    {/if}
    {#if data.response}
        <table class="min-w-full divide-y divide-gray-200 overflow-x-auto rounded-md shadow">
            <thead>
                <tr>
                    <th
                        class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                    >
                        ID
                    </th>
                    <th
                        class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                    >
                        Link
                    </th>
                    <th
                        class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                    >
                        Link Type
                    </th>
                    <th
                        class="bg-gray-50 px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500"
                    >
                        Link Results
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-700 bg-gray-100">
                {#each data.response as row}
                    <tr class="hover:bg-gray-100">
                        <td class="whitespace-nowrap px-6 py-4 text-sm font-medium text-gray-900">
                            {row.id}
                        </td>
                        <td class="px-6 py-4 text-left text-sm text-gray-500">
                            <a href={row.link} class="text-blue-500 underline">{row.url}</a>
                        </td>
                        <td class="px-6 py-4 text-left text-sm">
                            <select
                                class="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
                            >
                                {#each linkTypeOptions as option}
                                    <option value={option.value} selected={row.linkType === option.value}>
                                        {option.text}
                                    </option>
                                {/each}
                            </select>
                        </td>
                        <td class="px-6 py-4 text-left text-sm">
                            <select
                                class="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
                            >
                                {#each linkResultOptions as option}
                                    <option value={option.value} selected={row.linkResults === option.value}>
                                        {option.text}
                                    </option>
                                {/each}
                            </select>
                        </td>
                    </tr>
                {/each}
            </tbody>
        </table>
    {:else}
        <div><p>Select User First</p></div>
    {/if}
</div>

Also here is my +page.server.js code. making calls to collection based on what is selected works so I am just returning some dummy json for testing purpose.

export async function load({ locals }) {
    try {
        const users = await locals.pb.collection('UserData').getFullList();
        const userCoursesMap = new Map();
        users.forEach(entry => {
            const userId = entry.user[0];
            const courseName = entry.courseName;
            if (userCoursesMap.has(userId)) {
                userCoursesMap.get(userId).push(courseName);
            } else {
                userCoursesMap.set(userId, [courseName]);
            }
        });
        const userData = Array.from(userCoursesMap).map(([userId, courses]) => ({
            user: userId,
            courses: courses
        }));
        return { userData };
    } catch (error) {
        console.error('Error fetching user data:', error);
        throw error;
    }
}

export const actions = {
    userSelection: async ({ request }) => {
        const formData = await request.formData();
        const user = formData.get("user");
        let response = [
            {
                id: 'zuwhimcnnaxlwdh',
                linkResult: '',
                linkType: '',
                url: 'https://example.com/123',
                user: 'userA'
            },
            {
                id: 'zv43oplxdw3prl9',
                linkResult: '',
                linkType: '',
                url: 'https://example.io/334',
                user: 'userA'
            },
            {
                id: 'zwngacho00xetg0',
                linkResult: '',
                linkType: '',
                url: 'https://example.xyz/667',
                user: 'userA'
            }
        ];
        console.log(user)
        return { response }

    }
};