Custom themes are not displaying when switch

[Apoerin]

My setup looks like this package.json

 "dependencies": {
    "@material-ui/core": "^4.11.2",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.55",
    "@material-ui/pickers": "^3.2.8",
     "react": "^16.8.6",
   },
  "devDependencies": {
    "@storybook/addon-actions": "~6.3.12",
    "@storybook/addon-essentials": "~6.3.12",
    "@storybook/addon-links": "~6.3.12",
    "@storybook/node-logger": "~6.3.12",
    "@storybook/preset-create-react-app": "~3.2.0",
    "@storybook/react": "~6.3.12",
    "storybook-addon-intl": "^2.4.1",
    "storybook-addon-material-ui": "^0.9.0-alpha.24",
    "storybook-react-intl": "^0.9.2"
  },

main.js

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app",
    "storybook-addon-material-ui",
    "storybook-react-intl"
  ],
  "framework": "@storybook/react"
}

preview.js

import React from 'react';

import purple from '../src/theme/purple.theme';
import red from '../src/theme/red.theme';
import { muiTheme } from 'storybook-addon-material-ui';

import { addDecorator, configure } from '@storybook/react';

export const decorators = [
  muiTheme([purple, red])
];

// const req = require.context('../src/stories', true, /\.stories\.js$/)
// function loadStories() {
//   req.keys().forEach((filename) => req(filename))
// }

// configure(loadStories, module);


export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  docs: {
    // opt-out of inline rendering
    inlineStories: false,
  },
}

purple.theme.js

import { createMuiTheme } from '@material-ui/core/styles/index';

const purple = createMuiTheme({
  palette: {
    primary: {
      light: '#4fa9c4',
      main: '#007a93',
      dark: '#004e65',
      contrastText: '#ffffff',
    },
    secondary: {
      light: '#894494',
      main: '#5a1666',
      dark: '#2e003b',
      contrastText: '#fff',
    },
    type: 'light',
    custom: {
      appBarColor: '#007a93',
    },
  },
});

export default purple;

the same palette goes for red theme. Now if I want to change themes in Material-UI panel, it's not applying that palette. By default, I see purple theme and it's ok. If I click on the red theme, it just reset the theme for the default Material-UI one, not mine. It shows in the bottom panel the correct palette for themes, but does not apply them to stories.

Am I missing something or is this a bug?

[hketepalli-resilient]

I am having the same issue. Is there any fix for this?