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"
}
}