StyledComponent ThemeProvider value working in canvas but causes error in Docs in react storybook with addon-docs

[ghost]

Describe the bug
I have created react typescript app with Crate React App and integrated Storybook.

In the storybook preview.js:

import React, { Fragment } from 'react';
import { addDecorator } from '@storybook/react';
import { ThemeProvider } from 'styled-components';
import { GlobalStyle, theme } from '../src/theme';

addDecorator(story => (
  <ThemeProvider theme={theme}>
    <Fragment>
      <GlobalStyle />
      {story()}
    </Fragment>
  </ThemeProvider>
));

The component works fine in Canvas tab but gives error in Docs tab.

In Button.tsx

const Button = styled.button`
 background-color: ${props => props.theme.color.primary};
`;

In Docs tab, the theme object is undefined but works in Canvas tab. 

The issue occurs in Button.stories.mdx but does not occur if we create Button.stories.tsx file.

[shilman]

Can you show me Button.stories.tsx and Button.stories.mdx too?

[shilman]

Aha looks like you fixed it 👍

[ghost]

@shilman I reinstalled storybook and all storybook integrations from beginning and the error seems to be fixed.