How to get react-markdown to properly format backticks?

I am using the react-markdown (https://www.npmjs.com/package/react-markdown) component to render markdown. I ran into an issue with rendering `. It seems like it is not applying the highlighting aspect.

This is what I am trying to allow.

Some text with a hightlight foo bar

  const components = {
    code({ inline, className, children, ...props }: any) {
      const match = /language-(\w+)/.exec(className ?? '');
      return !inline && match ? (
        <SyntaxHighlighter
          language={match[1]}
          PreTag="div"
          children={String(children).replace(/\n$/, '')}
          {...props}
        />
      ) : (
        <code className={className} {...props} />
      );
    },
  };

  return (
    <ReactMarkdown components={components} remarkPlugins={[gfm]}>
      {content}
    </ReactMarkdown>
  );

Foo bar doesn't show up using react-markdown. Anyone have any suggestions?

Thanks!