react-markdown import error with nextjs 11.1 and typescript

This is a next.js SSG project, but on npm run dev I'm getting below error when trying to import react-markdown. I cant past this step to test in next export

I understand that react-markdown is a esm package, but I'm not clear on how to import esm into my project which is not esm. Am I missing any packages? I'm not using tailwind css.

Any help on this will be appreciated.

Server Error
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 component from the file it's defined in, or you might have mixed up default and named imports.

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
ReactDOMServerRenderer.render

package.json

{
  "browserslist": [
    ...
  ],
  "dependencies": {
    "autoprefixer": "^10.3.6",
    "axios": "^0.21.4",
    "next": "^11.1.2",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^6.7.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-markdown": "^7.1.0",
    "swr": "^1.0.1"
  },
  "devDependencies": {
    "@types/jest": "^27.0.2",
    "@types/react": "^17.0.25",
    "babel-jest": "^27.2.4",
    "express": "^4.17.1",
    "jest": "^27.3.1",
    "typescript": "^4.4.2"
  },
  "engines": {
    "node": ">=14.17.6",
    "npm": ">=6.14.15"
  },
  "name": "...",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_OPTIONS='--inspect' NODE_ENV='development' node server.js",
    "export": "next export",
    "start": "next start",
    "test": "jest",
  },
  "version": "0.1.0"
}

next.config.js

module.exports = {
  ...
  experimental: {
    esmExternals: true, //also tried 'loose'
  }
  ...
};

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": ".",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "lib": ["dom", "dom.iterable", "esnext"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "downlevelIteration": true,
    "resolveJsonModule": true,
    "skipLibCheck": true,
    "strict": false,
    "target": "es5"
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

component

import React from 'react';
import ReactMarkdown from 'react-markdown';

type TestComponentProps = {
  summaryTitle: string;
  markdownString: string;
};

export const TestComponent = ({ summaryTitle, markdownString }: TestComponentProps): JSX.Element => {
  return (
    <div className="container">
      <h2 id="ratingsId">
        {summaryTitle}
      </h2>
      <p>{markdownString}</p>
      <ReactMarkdown>{markdownString}</ReactMarkdown>
    </div>
  );
};

You need to force the ReactMarkdown to run on the client side

const ReactMarkdown= dynamic(() => import('react-markdown'),{ ssr: false })