I've tried everything to connect mathlive library to next.js. My component

"use client";

import { useState } from "react";

export function MathField() {
  const [value, setValue] = useState("");

  return (
    <div>
      <math-field></math-field>
    </div>
  );
}

. My declaration.d.ts:

import { MathfieldElement } from "mathlive";

declare global {
  namespace JSX {
    interface IntrinsicElements {
      "math-field": React.DetailedHTMLProps<
        React.HTMLAttributes<MathfieldElement>,
        MathfieldElement
      >;
    }
  }
}

. I get an error Property 'math-field' does not exist on type 'JSX.IntrinsicElements'. Here's what the documentation says about it: https://cortexjs.io/mathfield/guides/react/. Surfing the internet has only given this answer: https://stackoverflow.com/questions/79580197/typescript-cant-handle-new-element-in-jsx-intrinsicelements-in-new-vite-project. Maybe it will work for React, but not for Next.js. I don't know what to do at all. I will be grateful for any help.