How to fix message: "adsbygoogle.push() error: No slot size for availableWidth=0" for resposive google adsense?

I am currently using responsive layout and there are two adsense units that one of them will display on the user's screen depending on the screen size, the code looks like this:

<div id="ad_right" class="d-none d-md-inline">
    <ins class="adsbygoogle" style="display:block; margin-left:20px;" data-ad-client="ca-pub-rightslot" data-ad-slot="rightslot" data-ad-format="auto" data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

<div id="ad_bottom" class="d-md-none">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-bottomslot" data-ad-slot="bottomslot" data-ad-format="auto" data-full-width-responsive="true"></ins>
    <script>
        (adsbygoogle = window.adsbygoogle || []).push({});
    </script>
</div>

As you see, the right ads shows if users have screen that matches a PC size(md or larger), and the bottom ads shows if users have mobile/tablet screen(xs or sm). The issue is that, the elements are hidden but the script always runs, thus the code runs twice:

<script>
    (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Leading to the error message for google adsense. How do I fix this problem? I tried everything I could and aint able to resolve this problem.