Since v4.0.2 getting error "Storybook preview hooks can only be called inside decorators and story functions."

[bcbailey-torus]

Summary

After upgrading to version 4.0.2 I am getting the error Storybook preview hooks can only be called inside decorators and story functions.

Downgrading to 4.0.1 makes the error goes away.

This is likely related to the changes in #279

Is there something I need to change on my end?

Full error

Error: Storybook preview hooks can only be called inside decorators and story functions.
    at invalidHooksError (http://localhost:6006/sb-preview/runtime.js:97:11863)
    at getHooksContextOrThrow (http://localhost:6006/sb-preview/runtime.js:97:12123)
    at useHook (http://localhost:6006/sb-preview/runtime.js:97:12204)
    at useMemoLike (http://localhost:6006/sb-preview/runtime.js:99:209)
    at useRefLike (http://localhost:6006/sb-preview/runtime.js:99:505)
    at useStateLike (http://localhost:6006/sb-preview/runtime.js:99:940)
    at useState (http://localhost:6006/sb-preview/runtime.js:99:1201)
    at useDarkMode (http://localhost:6006/node_modules/.cache/storybook/ee6bf224cd156d2a19aeb1406fef9897dbfe874b3eae8c467c24b2f62e4ecd1a/sb-vite/deps/storybook-dark-mode.js?v=2c4e06dd:8560:51)
    at DarkModeObserver (http://localhost:6006/.storybook/preview.tsx:11:18)
    at renderWithHooks (http://localhost:6006/node_modules/.cache/storybook/ee6bf224cd156d2a19aeb1406fef9897dbfe874b3eae8c467c24b2f62e4ecd1a/sb-vite/deps/chunk-ILFQ7OTE.js?v=2c4e06dd:11548:26)

Reference

My storybook .storybook/preview.tsx for reference:

import { useDarkMode } from 'storybook-dark-mode'
import { useColorScheme } from '@mui/material/styles'
import { useEffect } from 'react'
import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'
import CssBaseline from '@mui/material/CssBaseline'

const DarkModeObserver = () => {
    const isDark = useDarkMode()
    const { setMode } = useColorScheme()
    useEffect(() => {
        if (isDark) {
            setMode('dark')
        } else {
            setMode('light')
        }
    }, [isDark])
    return null
}

const preview: Preview = {
    // ...
    decorators: [
        (Story) => (
            <CssVarsProvider theme={myThemeV1}>
                <DarkModeObserver />
                <CssBaseline />
                <Story />
            </CssVarsProvider>
        ),
    ],
}

export default preview

Versions

storybook: 8.1.10 storybook-dark-mode: 4.0.2