Adsense ads dont show in locally (empty ins)

Question

I have adsense account trying to display ad units in certain places in my site.

the problem is I need to test locally , so I had to follow the steps here: https://stackoverflow.com/a/64694852/11325588

Unfortunately, it only shows an empty ins element with no ads. There's no console errors and no failed network requests.

import React, { useEffect } from 'react';

type Props = {
  className?: string;
  style?: React.CSSProperties;
  slot: string;
  layout?: string;
  layoutKey?: string;
  format?: string;
  responsive?: string;
  // eslint-disable-next-line react/boolean-prop-naming
  pageLevelAds?: boolean;
  adTest?: string;
};

 const GoogleAd = ({
  className = '',
  style = { display: 'block' },
  slot,
  layout = '',
  layoutKey = '',
  format = 'auto',
  responsive = 'false',
  pageLevelAds = true,
  adTest,
  ...rest
}: Props) => {

    const client = process.env.GOOGLE_ADSENSE_KEY

    if(!client) return null;

  useEffect(() => {
    const p: any = {};
    if (pageLevelAds) {
      p.google_ad_client = client;
      p.enable_page_level_ads = true;
    }

    try {
      if (typeof window === 'object') {
        ((window).adsbygoogle = (window).adsbygoogle || []).push(p);
      }
    } catch {
      // Pass
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  

  return (
    <ins
      className={className}
      style={style}
      data-ad-client={client}
      data-ad-slot={slot}
      // data-ad-layout={layout}
      // data-ad-layout-key={layoutKey}
      data-ad-format={format}
      data-full-width-responsive={responsive}
      data-adtest={adTest}
      {...rest}
    />
  );
};

export default GoogleAd;

then in some page I use

<GoogleAd slot="XXXXXX" format="auto" responsive="true" adTest="on"/>