rehype-sanitize breaks math rendering

import React from "react";
import Markdown from "react-markdown";
import rehypeKatex from "rehype-katex";
import rehypeRaw from "rehype-raw";
import rehypeSanitize, { defaultSchema } from "rehype-sanitize";
import remarkMath from "remark-math";

import "katex/dist/katex.min.css";

const mathMarkdown = `
Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \\frac{1}{2} \\rho v^2 S C_L
$$

$$
\\sqrt{a}
$$

$$
f(\\relax{x}) = \\int_{-\\infty}^\\infty
    f(\\hat\\xi)\\,e^{2 \\pi i \\xi x}
    \\,d\\xi
$$
`;

const mathSanitizeSchema = {
  ...defaultSchema,
  attributes: {
    ...defaultSchema.attributes,
    div: [
      ...defaultSchema.attributes.div,
      ["className", "math", "math-display"]
    ],
    math: [["xmlns", "http://www.w3.org/1998/Math/MathML"], "display"],
    annotation: ["encoding"],
    span: ["className", "style"],
    svg: [
      ["xmlns", "http://www.w3.org/2000/svg"],
      "width",
      "height",
      "viewBox",
      "preserveAspectRatio"
    ],
    path: ["d"]
  },
  tagNames: [
    ...defaultSchema.tagNames,
    "math",
    "semantics",
    "annotation",
    "mrow",
    "mi",
    "mo",
    "mfrac",
    "mn",
    "msup",
    "msub",
    "svg",
    "path"
  ]
};

export default function App() {
  return (
    <>
      <h1>Without sanitize</h1>
      <Markdown rehypePlugins={[rehypeKatex]} remarkPlugins={[remarkMath]}>
        {mathMarkdown}
      </Markdown>
      <h1>With sanitize</h1>
      <Markdown
        rehypePlugins={[
          rehypeRaw,
          rehypeKatex,
          [rehypeSanitize, mathSanitizeSchema]
        ]}
        remarkPlugins={[remarkMath]}
      >
        {mathMarkdown}
      </Markdown>
    </>
  );
}