Ads not showing in WordPress post - php

Question

Despite returning the adinserter() function correctly, the ads are not appearing and only the ad header is being displayed. I am not sure what is causing this problem and would greatly appreciate any assistance in resolving this issue. Could it be an error in my code or a configuration problem with the plugin? I am hoping for some guidance and support in fixing this problem.
Also while consoling this error was showing:
Uncaught TagError: adsbygoogle.push() error: No slot size for availableWidth=0
Here's the php code
function insert_ad_codes($content) {
if (!function_exists('adinserter')) return $content;
$paras = explode("</p>", $content);
$total_paras = count($paras);
$insert_at = [];
// // check if device is mobile
if (wp_is_mobile()) {
$insert_at = [
floor($total_paras * 0.4),
floor($total_paras * 0.8)
];
} else {
$insert_at = [
floor($total_paras * 0.4),
floor($total_paras * 0.8)
];
}
foreach ($insert_at as $index) {
$paras[$index] .= '<div class="ad-container ad-container-1">'
. '<div class="ad-header ad-header-1">Ad Header</div>'
. '<div class="ad-content ad-content-1">' . adinserter(1) . '</div>'
. '</div>';
}
$content = implode("</p>", $paras);
$content = preg_replace('/(<p[^>]*>)/i', '<div class="ad-container ad-container-16">'
. '<div class="ad-header ad-header-16">Ad Header</div>'
. '<div class="ad-content ad-content-16">' . adinserter(1) . '</div>'
. '</div>' . '$1', $content, 1);
$content = preg_replace('/(<p[^>]*>.*?<\/p>)/i', '$1' . '<div class="ad-container ad-container-1">'
. '<div class="ad-header ad-header-1">Ad Header</div>'
. '<div class="ad-content ad-content-1">' . adinserter(1) . '</div>'
. '</div>', $content, 1);
return $content;
}
add_filter( 'the_content', 'insert_ad_codes');
css and js
add_action( 'wp_head', function () { ?>
<style>
.ad-container {
position: fixed;
bottom: 0;
right: 0;
height: 0;
overflow: hidden;
transition: height 0.3s;
}
.ad-header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.ad-content {
background-color: #fff;
padding: 10px;
display: none;
}
.ad-container.expanded {
height: 300px;
}
.ad-container.expanded .ad-content {
display: block;
}
</style>
<script>
var ad = document.querySelector('.ad-container');
var observer = new IntersectionObserver(function(entries) {
if (entries[0].isIntersecting) {
ad.classList.add('expanded');
} else {
ad.classList.remove('expanded');
}
});
observer.observe(ad);
</script>
<?php } );