Can anyone help me debug why it Rought-notation doesn't run in some text but it does in others?

[lertsoft]

I have my own component with ought-notation in it. Look at the image below for the component.

This component works on my hero page look at the code below.

But when i try to runought-notation on a different page or component of my site it does not work look at the code below.

I have tried different variants as shown in the documentation with variant parameters with no result. Any help would be highly appreciated!

Relevant info, Package.json

{ "name": "v5", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start -p ${PORT:=3000}", "lint": "next lint" }, "dependencies": { "axios": "^0.21.1", "next": "^12.1.3", "next-i18next": "^10.5.0", "next-themes": "0.0.15", "react": "17.x", "react-dom": "17.x", "react-rough-notation": "^1.0.1" }, "devDependencies": { "autoprefixer": "^10.3.1", "eslint": "8.12.0", "eslint-config-next": "12.1.4", "postcss": "^8.3.6", "tailwindcss": "^2.2.7" } }