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

Question

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?