Storybook – Element type is invalid: Expected a string

I have check my imports and component name but while running below code in Storybook, getting below error

Element type is invalid: Expected a string ( for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your componetn from the file it’s defined in, or you might have mixed up default and named imports.
Check the render method of ‘MDXContent’

or can you please guide me how to write same thing in typescript for storybook

Exisiting code for Storybook base on this https://storybook.js.org/docs/api/doc-blocks/doc-block-typeset

import { Meta, Story, ArgsTable, Preview } from '@storybook/blocks';
import { ThemeProvider } from '@emotion/react';
import MyTypography from '../src/Typography';
import customTheme from '../src/themes/customTheme';

<Meta 
  title="MyTypography" 
  component={MyTypography} 
  parameters={{ layout: "centered" }} 
  tags={['autodocs']} 
/>

# MyTypography

The `MyTypography` component renders typography elements with various styles. You can customize the variant and children to render different typography elements.

## Variants

### Example Usage

<Preview>
  <Story 
    name="Default Typography"
    args={{
      variant: "h1",
      children: "Hello World",
    }}
  >
    {({ args }) => (
      <ThemeProvider theme={customTheme}>
        <MyTypography variant={args.variant}>{args.children}</MyTypography>
      </ThemeProvider>
    )}
  </Story>
</Preview>

### Different Variants

<Preview>
  <Story 
    name="All Typography Variants"
    args={{
      children: "Typography Example",
    }}
  >
    {({ args }) => (
      <ThemeProvider theme={customTheme}>
        {["h1", "h2", "h3", "h4", "h5", "h6"].map((variant) => (
          <MyTypography key={variant} variant={variant}>
            {`${variant.toUpperCase()}: ${args.children}`}
          </MyTypography>
        ))}
      </ThemeProvider>
    )}
  </Story>
</Preview>

## Props

<ArgsTable of={MyTypography} />