How do i make a dynamic dropdown or Data select and use form actions to pass that data to backend file and make api call.

[devloper16]

I am brand new front end development and svelte kit.

I am trying to make pair of dynamic dropdowns I have a pocektbase collection named "users" that contains 2 fealds User and Asset. First dropdown contains list of users and second one will show list of assets for the selected user.

I am using daisyui and tailwindcss. This is my +page.svelte code.

<script>
	export let data;

	let selectedUser = '';
	let selectedAsset = '';

	function handleUserChange(event) {
		selectedUser = event.target.value;
		selectedAsset = ''; // Reset selected course when user changes
	}

	function handleCourseChange(event) {
		selectedAsset = event.target.value;
	}

	async function showSelection() {
		console.log('Selected User:', selectedUser);
		console.log('Selected Course:', selectedAsset);
	}
</script>

<div>
	{#if data}
		<form action="?/userSelection" method="POST">
			<select
				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 name="user" value={user.user}>{user.user}</option>
				{/each}
			</select>
			{#if selectedUser !== ''}
				<select
					class="select select-accent w-full max-w-xs"
					value={selectedAsset}
					on:change={handleCourseChange}
				>
					<option disabled selected>Select a Course</option>
					{#each data.userData.find((user) => user.user === selectedUser)?.courses || [] as course}
						<option name="course" value={course}>{course}</option>
					{/each}
				</select>
			{/if}
			<button type="button" on:click={showSelection}>Get Data</button>
		</form>
	{:else}
		<p>Loading...</p>
	{/if}
</div>

And this is my backend code that requests form data.

export const actions = {
    userSelection: async ({ request }) => {
        const formData = await request.formData();
        const user = Object.fromEntries(formData);
        console.log(user);
    }

The problem I am facing is colsolel.log from front end is showing correct selection but the back end is console logging empty object.

What am I doing wrong here?

Thank you for help,