Katex absolute value symbols do not render as expected

I am unsure as to why the demo at: https://katex.org can render the following LaTex correctly:

\left| \frac{1}{2} \right| as it will output: image.

However, when I try to do the same (with the same settings):

let userInput = "\\left| \\frac{1}{2} \\right|";        
katex.render(userInput, result, {"displayMode":true,"leqno":false,"fleqn":false,"throwOnError":true,"errorColor":"#cc0000","strict":"warn","output":"htmlAndMathml","trust":false,"macros":{"\\f":"#1f(#2)"}})

The output looks like this: image2. Notice how the absolute value symbol closes the numerator and denominator rather than the entire fraction instead.

How do I fix this? Is my JS or HTML (HTML is the most likely culprit here) incorrect? Did I correctly import the stylesheets and JS? Or is something else wrong?

Edit(s) and other discoveries worth noting:

• It is also worth noting that this error only shows up whenever the display mode is true or enabled by typing up \displaystle in the LaTex to render.
• I discovered a workaround, but a permanent solution would be ideal. If I type in {\displaystyle \lim_{n\rightarrow \infty}} \left|\frac{1}{2}\right| (for example) as LaTex for KaTex to render, it will allow for certain elements to be in displaystyle and others not. However, the question still stands, how does katex's demo do it?