Table doesn't render despite passing remark-gfm plugin to react-markdown component

[mratzloff]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

react-markdown@8.0.3, remark-gfm@3.0.1, node@18.2.0, yarn@3.2.1

Link to runnable example

https://codesandbox.io/s/determined-cdn-i27dzt?file=/src/app.tsx

Steps to reproduce

Please see the link to the CodeSandbox instance.

import Markdown from "react-markdown";
import gfm from "remark-gfm";

export default function App() {
  const md = `*This* is a test.

    || This || is || a || test ||
    |  1    |  2  |  3 |  4    |
    |  A    |  B  |  C |  D    |`;

  return (
    <Markdown children={md} remarkPlugins={[gfm]} />
  );
}

Expected behavior

The table should be rendered, as is the case in the demo. This might very well be user error, in which case any guidance would be appreciated!

Actual behavior

Note that the following issues have also been reviewed: #532, #529, #526, #525, #524, #516, and #493.

Runtime

Other (please specify in steps to reproduce)

Package manager

Other (please specify in steps to reproduce)

OS

macOS

Build and bundle tools

Create React App

[wooorm]

That is not a table, it will not render on GH either. You use too many pipes

[mratzloff]

Sorry, posting to this issue tracker was an accident. It was intended for react-markdown, and has been posted there instead.