Reactjs – ReactMarkdown + remarkGfm: everything renders as expected, EXCEPT tables – typeError?

I am testing ReactMarkdown to be able to render HTML tables from chatgpt generated markdown syntax. I’ve installed react-markdown and remarkGfm. But I keep getting this error: TypeError
Cannot set properties of undefined (setting ‘inTable’)

I get the error both in the project and in the codesandbox when isolated + markdown is hardcoded for testing. Here is the code:

import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';

const MarkdownResponse = () => {
    const response = `
  # heading 1
  ## heading 2
  ### heading 3
  ~~strikethrough~~  

  > Blockquote  

  **strong**  
  *italics*  
  ***
  [Gmail](https://gmail.com)  
  ***
  1. ordered list
  2. ordered list
  - unordered list
  - unordered list  
  
  | Syntax      | Description |
  | ----------- | ----------- |
  | Header      | Title       |
  | Paragraph   | Text        |
  `;

    const tableStyles = `
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  `;

    return (
        <div>
            <style>{tableStyles}</style>
            <ReactMarkdown
                remarkPlugins={[remarkGfm]}
                children={response}
                components={{
                    table: ({ node, ...props }) => (
                        <table style={{ border: '1px solid black' }} {...props} />
                    )
                }}
            />
        </div>
    );
};

export default MarkdownResponse;

I have read several articles here and from what I can tell, it seems that it’s supposed to work so long as remarkPlugins={[remarkGfm]}

I did see a thread where adding a style tag was supposed to make it work. But I have tried that as well and still getting the same error.

Link to codesandbox