It should be simple and straight foreword, but I'm having issues updating the json-ld script for each page.
I have a function that create the object for json-ld data but it doesn't update the script on the html document.

this is my function to create the data:

export function createJsonLd({ type, description, pathName, title }: JsonLdProps) {
  const pageUrl = `${BASE_URL}${pathName}`;

  return {
    '@context': 'https://schema.org',
    '@type': type,
    url: pageUrl,
    title,
    description,
    publisher: {
      '@type': 'Organization',
      name: 'Ricardo Esteves',
      logo: {
        '@type': 'ImageObject',
        url: `${BASE_URL}/logo.png`,
      },
    },
    image: `${BASE_URL}/og-image.png`,
    mainEntityOfPage: {
      '@type': 'WebPage',
      '@id': pageUrl,
      pageTitle: title,
      pageDescription: description,
}
}

and on each page I'm using it like this:

export default function LandingPage() {
  const jsonLd = createJsonLd({
    title: 'page title',
    description: 'page description',
    pathName: '',
  });

  return (
   <div>
      // JSX

      <Script
        id='json-ld'
        type='application/ld+json'
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
        strategy='beforeInteractive'
      />
    </div>
  );
}

Can anyone help me figure out how to update the script without using useEffect or mutating the document script directly like document.createElement etc... ?