How to fix React.lazy: the lazy component did not export a default component in React

// Correct - default export
export default function MyComponent() {
  return <div>Hello</div>;
}

// Wrong - named export
export const MyComponent = () => {
  return <div>Hello</div>;
};

import { lazy, Suspense } from 'react';

// Wrap named export in default for React.lazy
const MyComponent = lazy(() =>
  import('./MyComponent').then(module => ({
    default: module.MyComponent
  }))
);

// Use with Suspense
export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export const MyComponent = () => {
  return <div>Hello</div>;
};

export { MyComponent as default } from './MyComponent';

import { lazy, Suspense } from 'react';

const MyComponent = lazy(() => import('./MyComponentLazy'));

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

import { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

export default function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}