react-styleguidist use of TS in examples in MD files

Question

I would like to use TypeScript in Markdown files with React-Styleguidist, but I consistently encounter a SyntaxError. I would appreciate help in resolving this specific issue.

Here are the steps I have taken:

• I set up a React project with React-Styleguidist to generate documentation based on my components.
• I created Markdown files (.md) to document my React components.
• I added TypeScript code within these Markdown files to describe the component's property types.
• When I attempt to generate the documentation with React-Styleguidist, I receive a **SyntaxError** indicating a syntax issue in my TypeScript code.
• I have conducted online research to find solutions, but I have not found a clear answer to this particular problem.

Here are some additional details that may be helpful:

• I am using the "^13.1.1" version of React-Styleguidist.
• I have confirmed that TypeScript is properly installed and up to date on my machine.

This is my styleguide.config.js :

module.exports = {
  components: './src/components/**/*.{ts,tsx}',
  webpackConfig: {
    module: {
      rules: [
        {
          test: /\.[jt]sx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'esbuild-loader',
              options: {
                loader: 'tsx',
                target: 'es2017',
              },
            },
          ],
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx'],
    },
  },
};

Button.md :

    interface ButtonProps {
      title: string;
    }
    
    const handleButtonClick = ({ title }: ButtonProps): void => {
      console.log(title);
    };
    
    <Button onClick={() => handleButtonClick({ title: 'test' })}>Push Me</Button>

Button.tsx :

import React, { ReactNode, MouseEventHandler } from "react";

interface ButtonProps {
  children: ReactNode;
  styles?: React.CSSProperties;
  className?: string;
  handleChange?: MouseEventHandler<HTMLButtonElement>;
}

const Button: React.FC<ButtonProps> = ({
  children,
  styles,
  className,
  handleChange,
}) => {
  return (
    <button style={styles} className={className} onClick={handleChange}>
      {children}
    </button>
  );
};

export default Button;

My build result :

Doc error :