Katex script conflict with builder canvas

How To
1

I am using the following code to render latex equations using the katex library:

function load_katex() {
    $katex_version = '0.16.8';

    // Enqueue KaTeX styles
    wp_enqueue_style('katex-css', 'https://cdn.jsdelivr.net/npm/katex@' . $katex_version . '/dist/katex.min.css');

    // Enqueue KaTeX scripts
    wp_enqueue_script('katex-js', 'https://cdn.jsdelivr.net/npm/katex@' . $katex_version . '/dist/katex.min.js');
    wp_enqueue_script('mhchem-js', 'https://cdn.jsdelivr.net/npm/katex@' . $katex_version . '/dist/contrib/mhchem.min.js');
    wp_enqueue_script('auto-render-js', 'https://cdn.jsdelivr.net/npm/katex@' . $katex_version . '/dist/contrib/auto-render.min.js');
}
add_action('wp_enqueue_scripts', 'load_katex');

function print_inline_katex_script() {
    ?>
    <script>
        (function() {
            document.addEventListener("DOMContentLoaded", function() {
                renderMathInElement(document.body, {
                    delimiters: [
                        {left: "$$", right: "$$", display: true},
                        {left: "$", right: "$", display: false}
                    ]
                });
            });
        })();
    </script>
    <?php
}
add_action('wp_footer', 'print_inline_katex_script');

the script inside print_inline_katex_script(), is causing conflicts within the builder canvas, you can select elements from the structure sidebar but cannot change settings, everything except the elements settings don’t open up at the right.

Except for this, the CSS in the canvas is messed up, however things are fine on the frontend. If I disable the katex code or remove the script inside print_inline_katex_script(), things go fine again.

I am not an experienced developer, asking for some help here.