I am trying to use server component and server actions where possible. I would like to start with dropdown with a list of options. The dropdown options are created from a server action.

Once the user selects an option, I would like to use the value to call a server action and fetch a new set of options based on that selection that will create a second dropdown with the values returned from the server action.

Server actions looks as follows:

export const fetchInitialDropdownOptions = async () => {
return []
}

export const fetchSecondaryDropdownOptions = async (firstDropdownSelectedOption: number) => {
// use option to decide what to return
return []
}


My parent server component looks as follows:

const Form = async (): Promise<JSX.Element> => {
const initialDropdownOptions = await fetchInitialDropdownOptions();

return (
<div>
<InitialDropdown initialDropdownOptions={initialDropdownOptions} handleDropdownSelection={fetchSecondaryDropdownOptions} />
{secondaryDropdownOptions && <SecondDropdown secondaryDropdownOptions={secondaryDropdownOptions} />}
</div>
);
};


The client component looks as follows:
'use client';

const InitialDropdown = ({ initialDropdownOptions, handleDropdownSelection }): JSX.Element => {
return (
<Select labelId="example" id="example" value="example" label="example" onChange={handleDropdownSelection}>
{initialDropdownOptions.map(({ id, value }) => (
<MenuItem key={id} value={value}>
{value}
</MenuItem>
))}
</Select>
);
};


I do not know how to use the results of fetchSecondaryDropdownOptions. From what I have seen online this does not seem possible, but wanted to confirm here.

I think I could potentially change the route to try to hack this, but that doesnt seem ideal.

Thanks in advance for any help