Changing Signal Value in Event Handler throwing Qwik Error

index.tsx

import { component$ } from '@builder.io/qwik';
import { Prompt } from '@nx-toolkit/grammarguru/ui';
import { LandingPageGenericPromptOptions } from '@nx-toolkit/shared/data-access/transformer';

export default component$(() => {
  return (
    <div>
      <h1>
        Welcome grammarguru <span class="lightning">⚡️</span>
      </h1>
      <Prompt
        promptOptions={LandingPageGenericPromptOptions}
        userText={''}
      ></Prompt>
    </div>
  );
});

Prompt.tsx

import { component$, useSignal, useStore } from '@builder.io/qwik';
import { Button } from '../button/button';
import {
  I18nMappings,
  PromptOption,
} from '@nx-toolkit/shared/data-access/transformer';

type PromptCategories = 'generate' | 'improve' | 'feedback';

type MultiPromptBox = Record<PromptCategories, PromptOption[]>;

interface PromptStore {
  selectedCategory: string | undefined;
  selectedPromptOption: string;
  selectedSubOption: string | undefined;
}

interface PromptProps {
  userText: string;
  promptOptions:
    | MultiPromptBox
    | Record<string, PromptOption[]>
    | PromptOption[];
}

export const Prompt = component$(({ userText, promptOptions }: PromptProps) => {
  const hasPromptCategories = !Array.isArray(promptOptions);
  const promptStore = useStore<PromptStore>({
    selectedCategory: hasPromptCategories ? 'generate' : undefined,
    selectedPromptOption: (hasPromptCategories
      ? promptOptions['generate'][0]
      : promptOptions[0]
    ).name,
    selectedSubOption: (() => {
      const promptOption = hasPromptCategories
        ? promptOptions['generate'][0]
        : promptOptions[0];
      return promptOption.subOptions && promptOption.subOptions.length > 0
        ? promptOption.subOptions[0]
        : undefined;
    })(),
  });

  return (
    <div class="flex flex-col justify-center">
      <div class="pt-8 self-center flex gap-4">
        <Button variant="none" color="grayscale">
          Clear
        </Button>
        <Button
          onClick$={() => {
            promptStore.selectedCategory = 'improve' as PromptCategories;
          }}
        >
          Submit
        </Button>
      </div>
    </div>
  );
});