MDXRemote and math equations

Question

I'm making a math-related website where I want to post questions

I'm working with the following:

Package.json

{
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@mdx-js/loader": "^3.0.0",
    "@mdx-js/react": "^3.0.0",
    "@next/mdx": "^14.0.4",
    "@types/katex": "^0.16.7",
    "@types/mdx": "^2.0.10",
    "@types/react-katex": "^3.0.4",
    "classnames": "^2.3.2",
    "katex": "^0.16.9",
    "next": "14.0.2",
    "next-mdx-remote": "^4.4.1",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "rehype-katex": "^7.0.0",
    "rehype-mathjax": "^6.0.0",
    "remark": "^15.0.1",
    "remark-math": "^6.0.0",
    "remark-parse": "^11.0.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@typescript-eslint/eslint-plugin": "^6.13.2",
    "@typescript-eslint/parser": "^6.13.1",
    "autoprefixer": "^10.4.16",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "postcss": "^8.4.31",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

This is the part that's causing me problems. It's a page to display a card with MDX content taken from the backend.

import React from 'react'
import { BasicPanelComponent } from '@/app/components/panels/BasicPanelComponent'
import { TextComponent } from '../text/TextComponent'
import { MDXRemote } from 'next-mdx-remote/rsc'
import TagListComponent from '../tags/TagListComponent'
import { ButtonComponent } from '../buttons/ButtonComponent'

interface NoteCardProps {
  title: string
  description: string
  content: string
  showButton: boolean
  tags: {
    id: number
    name: string
    color: string
  }[]
}

export default function NoteCardComponent({ ...props }: Readonly<NoteCardProps>) {
  return (
    <BasicPanelComponent backgroundColor='bg-white dark:bg-dark-primary'>
      <TextComponent
        sizeFont='s36'
        className='dark:text-dark-accent'>
        {props.title}
      </TextComponent>
      <TagListComponent
        tags={props.tags}
        showIcon={false}
      />
      <TextComponent
        sizeFont='s14'
        className='text-gray-500 font-medium my-4'>
        {props.description}
      </TextComponent>
      <MDXRemote source={props.content} />
      {props.showButton ? (
        <div className='grid justify-items-center'>
          <a href='/exercises'>
            <ButtonComponent text='Problemas del tema' />
          </a>
        </div>
      ) : (
        <></>
      )}
    </BasicPanelComponent>
  )
}

This is a JSON file that I'm using as a template for the backend response containing the MDX content.

{
  "id": 1,
  "title": "Números enteros",
  "description": "Texto de descripción considerablemente largo para hacer pruebas sobre cómo se envuelve el texto en el diseño de la página.",
  "tags": [
    { "id": 1, "name": "Números enteros", "color": "#8855aa" },
    { "id": 2, "name": "Campos numéricos", "color": "#cc55aa" }
  ],
  "content": "# Título <br /> texto <br /> $ L = \\frac{1}{2} \\rho v^2 S C_L $"
}

II expected it to display the equation between the $$s, but... The actual result

I've tried importing import { MDXRemote } from 'next-mdx-remote' instead of import { MDXRemote } from 'next-mdx-remote/rsc', changing the props accordingly