Reactjs – using $ sign in react component html making a hydration error in next js 14

This is my code :

import VideoPlayer from './VideoPlayer';
import dynamic from 'next/dynamic';
import Link from 'next/link';
const GSAPComponent = dynamic(() => import('./GSAPComponent'), { ssr: false });

export default function Hero() {
  return (
    <section className="nav-height relative w-full bg-black">
      <div className="flex-center h-5/6 w-full flex-col">
        <p id="hero" className="hero-title">
          iPhone 15 Pro
        </p>

        <VideoPlayer
          smallScreenSrc="/assets/videos/smallHero.mp4"
          largeScreenSrc="/assets/videos/hero.mp4"
        />
        <div
          id="cta"
          className="flex translate-y-20 flex-col items-center opacity-0"
        >
          <Link href="#highlights" className="btn">
            Buy
          </Link>
          <p className="text-xl font-normal"> from $199/month or $999 </p>
        </div>

        <GSAPComponent />
      </div>
    </section>
  );
}

this line is causing a hydration error in next js 14 :<p className="text-xl font-normal"> from $199/month or $999 </p>

I underestand that $ sign is used in JSX as for introducing a variable but can you please help me avoid this problem .
Here is how it looks like now with the $ signs
this is the rendered html

<p className="text-xl font-normal"> from 199/month or 999 </p> when I remove the $ signs it actually works .
Please help me .