React Markdown not rendering properly with a mix of html and katex

Question

I have a problem when using react-markdown component from remarkJs to render the content correctly. I am able to render the latex it correctly when it's on its own line but does not render latex when wrapped inside table tags.

The below does not render the latex properly it simply retains the dollars without rendering the latex also

import React from "react";
import "katex/dist/katex.min.css";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import rehypeKatex from "rehype-katex";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";

const RenderContent = ({ content }) => {
  const processedContent =
    content.replace(/_latex\$\$(.*?)\$\$latex_/g, "$$$1$");
    console.log(processedContent);

    const markdownContent = `<table border='1'>
    <tr>
    <td colspan='1'>A1</td>
    <td colspan='1'>_latex$$ 0λ/ $$latex_ Test</td>
    </tr>
    </table>
  `.replace(/_latex\$\$(.*?)\$\$latex_/g, "$$$1$")
    
  return (
    <Markdown
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[rehypeRaw, rehypeKatex]}
    >
      {markdownContent}
    </Markdown>
  );

};

export default RenderContent;

output A1 $ 0λ/ $ Test with the borders also

But when i move the latex stuff to the first line it's rendering correctly

import React from "react";
import "katex/dist/katex.min.css";
import Markdown from "react-markdown";
import rehypeRaw from "rehype-raw";
import rehypeKatex from "rehype-katex";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";

const RenderContent = ({ content }) => {
  const processedContent =
    content.replace(/_latex\$\$(.*?)\$\$latex_/g, "$$$1$");
    console.log(processedContent);

    const markdownContent = `_latex$$ 0λ/ $$latex_ Test</td>
    </tr>
    </table>
  `.replace(/_latex\$\$(.*?)\$\$latex_/g, "$$$1$")
    
  return (
    <Markdown
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[rehypeRaw, rehypeKatex]}
    >
      {markdownContent}
    </Markdown>
  );

};

export default RenderContent;

output

0λ/ Test

I am confused as to what is making it render correctly at times and other times it's not. I am missing something here, I couldn't find details about it in any documents also

If we can assume that it is rendering the string as it is without considering the latex stuff, what should be done to overcome it