What is the compatible version of storybook addon theme?

Question

I want to configure custom theme classes in my nx angular application. I just installed storybook version of 7.5.3 and storybook-addon-themes 6.1.0 which is latest version of custom theme configuration. But when I run the storybook application I'm getting below error. I could find any other solution to configure custom theme class. Please help me to find solution for this!

the following packages are incompatible with storybook 7.6.20 as they depend on different major version of storybook packages : [email protected]

This is my package.json storybook version

"@nx/storybook": "18.3.1",
"@storybook/addon-essentials": "^7.5.3",
"@storybook/addon-interactions": "^7.5.3",
"@storybook/addon-webpack5-compiler-babel": "^3.0.3",
"@storybook/angular": "^7.5.3",
"@storybook/core-server": "^7.5.3",
"storybook-addon-themes": "^6.1.0",

This is my main.js

import type { StorybookConfig } from '@storybook/angular';

const config: StorybookConfig = {
  core: {
    builder: '@storybook/builder-webpack5',
  },
  stories: ['../src/app/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    'storybook-addon-themes',
  ],
  framework: {
    name: '@storybook/angular',
    options: {},
  },
};

export default config;

This is my preview.ts

export default {
  parameters: {
    themes: {
      default: 'AGNOSTIC',
      list: [
        {
          name: 'AGNOSTIC',
          class: 'theme-agnostic',
          color: '#AA4AD6',
          default: true,
        },
        { name: 'PPT', class: 'theme-ppt', color: '#ff2c83' }
      ],
      onChange: (theme: { name: any; class: string }) => {
        const themeName = theme.name;
        const themeClass = theme.class ?? 'theme-ppt';
        sessionStorage.setItem('theme', themeName);
        localStorage.setItem('themeClass', themeClass);
      }
    },
  },
};