MathML displays differentiation operator weirdly

I use MS Edge latest version (139.0.3405.125) and I want to display some math using MathML. The problem is that the differetial operator shows in this weird ultrathick font known from latex as mathbb style. I do not know why this happens. Can someone help and explain? The same thing also appears using the latest version of Chrome (version 139.0.7258.155). This is my code. And below is the screenshot of the result I’m having.

The same thing appears on all of my three browsers Firefox, Chrome and Edge and also on another PC with Firefox, Edge, Chrome and Brave browsers. This is the first time I’ve written anything in MathML.

I browsed the internet for sites with MathML content and each of them did the differential operator differently. This site wrote <mi>dx<mi>, which is wrong. That site wrote <mi>d<mi><mi>x<mi> as if d was a variable. The third site used <mo>ⅆ</mo> in the source code. Needless to say, the d operator seems very scuffed in MathML.

<!doctype html>
<html>
    <head>
        <title>Example</title>
    </head>

    <body>
        <header>
            <h1>
                Example
            </h1>
        </header>
        <p>
            <math display="block">
                <mi>I</mi>
                <mo>=</mo>
                <munder>
                    <mo>&int;</mo>
                    <mi>S</mi>
                </munder>
                <mrow>
                    <mo>&DifferentialD;</mo>
                    <mi>x</mi>
                </mrow>
            </math>
        </p>
    </body>
</html>

The weird d.