convert markdown to html safe and without loss of content

Question

I perform the conversion from markdown to html using remark-rehype. I know about "fenced code blocks" and use it.

I expect to get

<p> escaped html </p>

from a string that for some reason may contain jsx or other code passed to markdown due to inattention, for example (next I will call it "code 1")

... marrkdown ...
<button
className="codecopy"
onClick={handlerCopy}
ref={refBtnCopy}
>
{textBthCopy}
</button>
... marrkdown ...

I started using plugin "rehype-sanitize" so that "ref" would not be passed to rehype-react. And now if pass the (code 1) get

<p>&lt;button
className="codecopy"
onClick={handlerCopy}
ref={refBtnCopy}</p>

How to get code like this

<p>
&lt;button
className="codecopy"
onClick={handlerCopy}
ref={refBtnCopy}
&gt
{textBthCopy}
&lt;/butto&gt
</p>

I'm making a client server application. server side convert markdown to html

unified()
    .use(remarkParse)
    .use(remarkRehype, { allowDangerousHtml: true })
    .use(rehypePrismCustom ) // highlight with prismjs
    .use(rehypeCodeBlock) // make custom markup for block code and add html tag section
    .use(rehypeAhref) // change attributes a[href] html tag
    .use(rehypeStringify, { allowDangerousHtml: true })

on client side compile html to React components

unified()
    .use(rehypeParse, { fragment: true })
    .use(rehypeSanitize, {
        ...defaultSchema,
        tagNames: [
            ...(defaultSchema.tagNames || []),
            "section",
            "iframe",
        ],

        attributes: {
            ...defaultSchema.attributes,
            "*": ["className"],
            iframe: [
                "width",
                "height",
                "src",
                "title",
                "allow",
                "allowfullscreen",
            ],
        },
    })
    .use(rehypeReact, {
        createElement: React.createElement,
        Fragment: React.Fragment,
        components: {
            section: CodeSection,
        },
    })