How to decompose ThreadWelcome.Suggestions?

[osseonews]

We are using the styled components, and trying to create a Suggestions for the ThreadWelcome. We are following the directions here: https://www.assistant-ui.com/docs/ui/styled/Decomposition#threadwelcomesuggestions. The relevant code snippet is below. We can't get this to work (we have used decomposition on other components successfully). But when we try the code below, we get the following error: "TypeError: Cannot read properties of undefined (reading 'text')" and the page won't build. We also get the following typescript error: "Type '{ prompt: string; }' is not assignable to type 'IntrinsicAttributes & ThreadWelcomeSuggestionProps'.
Property 'prompt' does not exist on type 'IntrinsicAttributes & ThreadWelcomeSuggestionProps'.ts(2322)". Any ideas on what we are doing wrong?

export const MyThread: FC<ThreadConfig> = (config) => {
  return (
    <Thread.Root config={config}>
      <Thread.Viewport>
        <MyThreadWelcome />
        <Thread.Messages components={{ UserMessage: MyUserMessage2, AssistantMessage: MyAssistantMessage2 }} />
        <Thread.FollowupSuggestions />
        <Thread.ViewportFooter>
          <Thread.ScrollToBottom />
          <Composer />
        </Thread.ViewportFooter>
      </Thread.Viewport>
    </Thread.Root>
  );
};




const MyThreadWelcome: FC = () => {
  return (
    <ThreadWelcome.Root>
      <ThreadWelcome.Center>
        <ThreadWelcome.Avatar />
        {/*<ThreadWelcome.Message />*/}
        <div>How can we help you today?</div>
      </ThreadWelcome.Center>
      <MyThreadWelcomeSuggestions />
    </ThreadWelcome.Root>
  );
};

const MyThreadWelcomeSuggestions: FC = () => {
  return (
    <div className="aui-thread-welcome-suggestion-container">
      <ThreadWelcome.Suggestion prompt="Write me a poem about the weather" />
      <ThreadWelcome.Suggestion prompt="What is assistant-ui?" />
    </div>
  );
};