NextJs meta tag in next/head not available to Facebook and metatags.io

I create a component SeoHeader to handle meta tag creation on NextJs project

import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/dist/client/router';

const SeoHeader = ({ title, description, image }) => {
  const router = useRouter();
  return (
    <Head>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />

      <meta name="description" content={description} key="description" />

      <meta property="og:type" content="website" />
      <meta property="og:title" content={title} key="og:title" />
      <meta property="og:description" content={description} key="og:description" />
      <meta property="og:image" content={image} key="og:image" />
      <meta property="og:url" content={`https://www.energici.fr${router?.asPath}`} key="og:url" />
      <meta name="twitter:card" content={description} key="twitter:card" />

      <meta property="og:site_name" content="Energici, l'info bien être" key="og:site_name" />

      <meta
        property="twitter:url"
        content={`https://www.energici.fr${router?.asPath}`}
        key="twitter:url"
      />
      <meta
        name="twitter:image:alt"
        content="Energici la plateforme du bien être"
        key="twitter:image:alt"
      />
      <meta property="twitter:domain" content="energici.fr" />

      <title>{title}</title>
    </Head>
  );
};

export default SeoHeader;

If I import this component on _app.js everything is going well. I can see the meta tags in html dom and if I share the link preview card is ok. But if I share another page for example this one : https://www.energici.fr/decouvrons-la-kinesiologie I can see the correct meta tag in html dom but if I share the link in facebook for example or if I test it here https://metatags.io/ I cannot se anything, it's like there is no meta tag.

Any idea ?