How to correctly use mapped options for complex types with typescript

[Jsumner92]

Summary

I am having issues with mapping complex types to more usable args in storybook.

I created an example using one of your storybook examples and these are the props of the component

type User = {
  name: string;
};

interface HeaderProps {
  user?: User;
  onLogin?: () => void;
  onLogout?: () => void;
  onCreateAccount?: () => void;
}

I then do the mapping as shown in the docs

const userOne = { name: 'Jane Doe' };
const userTwo = { name: 'John Smith' };
const userThree = { name: 'bobby' };

const users = { userOne, userTwo, userThree };

const meta = {
  ...
  argTypes: {
    user: {
      options: Object.keys(users),
      mapping: users,
      control: {
        type: 'radio',
      },
    },
  },
} satisfies Meta<typeof Header>;

I then render the story like so, which works for storybook and correctly renders userOne

export const LoggedIn: Story = {
  args: {
    user: 'userOne',
  },
};

However this throws a type error as Type 'string' is not assignable to type 'User'.. So I'm just wondering am I missing something here to be able to use the mapping with typescript on complex objects?

Additional information

No response

Create a reproduction

https://stackblitz.com/edit/github-xzv4rz?file=src%2Fstories%2FHeader.stories.ts

[gk-bbai]

Same issue here.