defaultProps weird issue when used in storybook

[ErAz7]

Describe the bug

when I use an object in defaultProps, object name is stored in default prop as an string instead of object value

To Reproduce

here is a very simple example:

1. create this component which imports Theme from config.js, sets theme prop's default value to THEMES.PRIMARY and just renders theme:

import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import { THEMES } from 'config';

export default class MyComponent extends PureComponent {
    static propTypes = {
        theme: PropTypes.string
    }

    static defaultProps = {
        theme: THEMES.PRIMARY
    }

    render() {
        const { theme } = this.props;

        return (
            <div>
                {theme}
            </div>
        );
    }
}

and here is config.js:

export const THEMES = {
    PRIMARY: 'primary'
};

2. create the story file:

import React from 'react';
import MyComponent from './MyComponent';

export default {
    component: MyComponent,
    title: 'components/MyComponent'
};

const Template = args => <MyComponent {...args} />;

export const Playground = Template.bind({});

3. now if you run yarn storybook and check the story, you'll see this:
   
   as you see, "THEMES.PRIMARY" is stored in theme instead of "primary" which is the value of THEMES.PRIMARY

I think the cause for this is related to this issue, except this will result in more serious problems

[pixelass]

Duplicate: There is an open issue for this: #12076

[shilman]

closing as dupe to #12076