I am trying to use argTypes with a select to allow the user to change fields, I have this default export:
const themes = {
defaultTheme,
salesTheme,
cuttingTheme,
} as const;
export default {
title: 'atoms/Button',
component: Button,
argTypes: {
theme: {
options: Object.keys(themes), // iterator
mapping: Object.values(themes), // values
control: {
type: 'select',
labels: Object.keys(themes),
values: Object.values(themes), //
},
defaultValue: themes.defaultTheme,
},
},
} as ComponentMeta<typeof Button>;
defaultValue works fine when the page first loads but if I change a menu item on the sidebar pane it loses its value.