Storybook gives error on hotreload in Nextjs with Material ui 5

When I refresh the page, I get correct component loaded up. If the component is Typography and i edit a text. It works fine. The error occurs when i change Typography to Button component. Tried storybook-addon-next-material-ui. Same error there

 index.js:56 Unexpected error while loading ./pages/test.stories.tsx: Cannot read properties of undefined (reading 'call')
 TypeError: Cannot read properties of undefined (reading 'call')
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at ./components/test-component.tsx (http://localhost:6006/main.436c782e1c77c7940bf8.hot-update.js:14:71)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at ./stories/pages/test.stories.tsx (http://localhost:6006/main.iframe.bundle.js:44:84)
    at __webpack_require__ (http://localhost:6006/runtime~main.iframe.bundle.js:28:33)
    at fn (http://localhost:6006/runtime~main.iframe.bundle.js:339:21)
    at webpackContext (http://localhost:6006/main.iframe.bundle.js:118:9)
    at http://localhost:6006/vendors-node_modules_mui_material_Button_Button_js-node_modules_storybook_addon-actions_previ-68b32d.iframe.bundle.js:14244:29

.storybook/main.js

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    'storybook-addon-next',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
  },
};

test.stories.tsx

import { TestComponent } from '../../components/test-component';

export default {
  title: 'Pages',
  component: TestComponent,
};

export const TestScreen = () => <TestComponent />;

test-component.tsx

import { Button, Typography } from '@mui/material';
import React from 'react';

export const TestComponent = () => {
  return <Typography>TestComponent</Typography>;
};