Repository: storybook
Issue: [Bug]: `@storybook/addon-themes` `withThemeByClassName` type error
Labels: bug,has workaround,sev:S3,addon: themes

### Describe the bug

I get a Typescript error in my `preview.tsx` file with the function `withThemeByClassName` from `@storybook/addon-themes` but I believe the issue might be with all the Theme functions. I'm using `withThemesByClassName` to pass in the light/dark mode classes so that TailwindCSS can take over and handle the light/dark displays of components. While this type error seems to not have an issue with the functionality of the adding/changing of classes, I just wanted to raise this issue.

This is the full output of the type issue:
```ts
Type 'DecoratorFunction<Renderer, Args>' is not assignable to type 'DecoratorFunction<ReactRenderer, { [x: string]: any; }>'.
  Types of parameters 'c' and 'c' are incompatible.
    Type 'StoryContext<ReactRenderer, { [x: string]: any; }>' is not assignable to type 'StoryContext<Renderer, Args>'.
      Types of property 'originalStoryFn' are incompatible.
        Type 'StoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
          Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'StoryFn<Renderer, Args>'.
            Type 'LegacyStoryFn<ReactRenderer, Args>' is not assignable to type 'LegacyStoryFn<Renderer, Args>'.
              Types of parameters 'context' and 'context' are incompatible.
                Type 'StoryContext<Renderer, Args>' is not assignable to type 'StoryContext<ReactRenderer, Args>'.
                  Types of property 'canvasElement' are incompatible.
                    Type 'unknown' is not assignable to type 'HTMLElement'.ts(2322)
(alias) withThemeByClassName<Renderer>({ themes, defaultTheme, parentSelector, }: ClassNameStrategyConfiguration): DecoratorFunction<Renderer, Args>
import withThemeByClassName
```

Seems like `decorators` is expecting `DecoratorFunction<ReactRenderer, Args>` instead of `DecoratorFunction<Renderer, Args>`

This is a React Project built on Next.JS / TailwindCSS.

### To Reproduce

I converted my preview file to `preview.tsx` in order to pass in Google Fonts via `NextFont` import to each story.  But here is what I have in the preview file.

```jsx
decorators: [
    withThemeByClassName({
      themes: {
          light: 'light',
          dark: 'dark',
      },
      defaultTheme: 'light',
    }),
    (Story) => (
      <div className={`${montserrat.className}`}>
        <Story />
      </div>
    )
  ]
```

### System

```bash
Storybook Environment Info:

  System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD <----- active
  Browsers:
    Chrome: 120.0.6099.56
    Edge: Spartan (44.19041.3570.0), Chromium (119.0.2151.93)
  npmPackages:
    @storybook/addon-a11y: ^7.6.3 => 7.6.3
    @storybook/addon-essentials: ^7.6.3 => 7.6.3
    @storybook/addon-interactions: ^7.6.3 => 7.6.3
    @storybook/addon-links: ^7.6.3 => 7.6.3
    @storybook/addon-onboarding: ^1.0.8 => 1.0.8
    @storybook/addon-themes: ^7.6.3 => 7.6.3
    @storybook/blocks: ^7.6.3 => 7.6.3
    @storybook/jest: ^0.2.3 => 0.2.3
    @storybook/nextjs: ^7.6.3 => 7.6.3
    @storybook/react: ^7.6.3 => 7.6.3
    @storybook/testing-library: ^0.2.2 => 0.2.2
    eslint-plugin-storybook: ^0.6.15 => 0.6.15
    storybook: ^7.6.3 => 7.6.3
    storybook-dark-mode: ^3.0.3 => 3.0.3
```


### Additional context

_No response_