Why is InterstitialAd not loaded after the first trigger?

Question

I manage to get the first ad to show, but app crashed the next time I try to trigger an ad. And gives me this error: Error: InterstitialAd.show() The requested InterstitialAd has not loaded and could not be shown

In App.js

componentDidMount() {
    const eventListener = interstitial.onAdEvent(type => {
      if (type === AdEventType.LOADED) {
        this.setState({
          setLoaded: true,
        });
      }
    });

    interstitial.load();
    eventListener();

  }

showAds = () => {
    interstitial.show();
    // No advert ready to show yet
    if (!this.state.loaded) {
      console.log('null');
      return null;
    }
  };

// This trigger is within another function
      this.showAds();

I have a class component so I use ComponentDidMount instead of useEffect. Might that cause some troubles?

UPDATE:

    this.state = {
      loaded: false,
      setLoaded: false,
      Listener: null,
    };

The above state is an attempt to redo

const [loaded, setLoaded] = useState(false);

Answer 1

constructor () {
    super();
    this.Listener=null
  }

componentDidMount() {
    this.Listener = interstitial.onAdEvent(type => {
      if (type === AdEventType.LOADED) {
        this.setState({
          loaded: true,
        });
      }else if(type === AdEventType.CLOSED){
        this.loadAd()
     }
    });
    this.loadAd()
 }

componentWillUnmount(){
  if(this.Listener!==null){
   this.Listener()
  }
}

loadAd = () =>{
   this.setState({
      loaded: false,
   });
   interstitial.load();
}

showAds = () => {
   if (!this.state.loaded) {
     console.log('null');
     return null;
   }else{
     interstitial.show();  
   }
 };