Using useState along with global decorators throws Storybook preview hooks can only be called inside decorators and story functions. error

[abhic91]

I am using storybook in a monorepo. In my root folder in preview.js I have this:

export const decorators = [
  (Story) => {
    const theme = createTheme("violet", "gray");
    const GlobalStyles = createGlobalStyle`
      *{padding: 0; margin: 0; box-sizing: border-box;}
      ul{ list-style: none}
    `;
    return (
      <ThemeProvider theme={theme}>
        <GlobalStyles />
        <Story />
      </ThemeProvider>
    );
  },
];

When I use decorators along with useState in my components, I get,
Storybook preview hooks can only be called inside decorators and story functions.

The story:

export const Default = () => {
    let items = [
      { id: "1", name: "one" },
     ...
    ];
   
    const [inpItems, setItems] = useState(items);
   
    return (
      <ComboBox
        items={inpItems}
        onInputValueChange={({ inputValue }) => {
          setItems(allItems.filter((item) => item.name.includes(inputValue)));
        }}
        itemToString={(item) => item?.name}
       
      />
    );
  };

When I comment out the decorator, everything works fine. What am I doing wrong?

[SanderCokart]

Yes! I have this exact same issue, using addon-themes and it breaks the ability to use useState in template functions.