Next.js carousel component loads instagram basic display api perfectly except in Safari browser

Question

I am building a website that has an Artists page with a dynamic route inside which loads an individual artists' page using their id number from a json file stored on the server. However, this artist[id].tsx page has a carousel which is comprised of instagram posts, fetched using the instagram basic display api. This works perfectly fine on all browsers except Safari. On Safari you need to load an artists' page, exit the app (without closing it) and go back in again to have the carousel display the fetched data correctly. I have tried every cheap hack I could think of to no success whatsoever, any help would be great. Also, I can't use something like getStaticProps because the Artists page is interactive.

Here is the carousel component:

import styles from './css/Carousel.module.css'
import {ReactElement, useRef, useEffect, useState} from 'react';
import CarouselItem from './CarouselItem';
import { getPosts } from '../utilities/instagramFeed';


type CarouselProps = {
    infinite: boolean,
  };

  interface InstagramPost {
    id: string;
    caption: string;
    media_type: string;
    media_url: string;
    permalink: string;
    timestamp: string;
  }

  
export default function InstaCarousel(props: CarouselProps) {
    const carouselRef = useRef<HTMLDivElement>(null);
    const [instagramPosts, setInstagramPosts] = useState<InstagramPost[]>([]);
    useEffect(() => {
        const fetchInstagramPosts = async () => {
            try {
              const posts = await getPosts();
              setInstagramPosts(posts);
            } catch (error) {
              console.error('Error fetching Instagram posts:', error);
            }
          };
          fetchInstagramPosts();
      const updateCarouselWidth = () => {
          const width = calculateCarouselWidth();
          document.documentElement.style.setProperty('--carousel-width', width);
      };
      updateCarouselWidth();
      window.addEventListener('resize', updateCarouselWidth);
      return () => {
          window.removeEventListener('resize', updateCarouselWidth);
      };
  }, []);

  console.log(instagramPosts);

  const children  = instagramPosts.map((post, index) => (
    <div key={index} className='bg-white h-100 w-100'>
      {post.media_type === 'VIDEO' ? (
        <video controls autoPlay>
          <source src={post.media_url} type="video/mp4" />
          Your browser does not support the video tag.
        </video>
      ) : (
        <div className="bg-white">
          <img src={post.media_url} alt={post.caption} width={1080} height={1080}/>
        </div>
      )}
    </div>
  ))

    
    

    const calculateCarouselWidth = () => {
      if (carouselRef.current) {
          const carouselWidth = carouselRef.current.offsetWidth;
          const itemCount = children.length;
          const totalWidth = carouselWidth * itemCount;
          return `${totalWidth}px`;
      }
      return '100%'; // Default width
    };

    const style = "carouselCont";
    const carStyle = props.infinite ? `${styles.carousel} ${styles.infinite}` : `${styles.carousel}`;

    
  
    const output = children.map((item: ReactElement, index) => (
      <CarouselItem type={true} key={index}>
        {item}
      </CarouselItem>
    ));
  
    return (
      <div className={styles[`${style}`]}>
        <div className={carStyle}>
          {output}
        </div>
      </div>
    );
  }

Here's the website if you're curious to see what I'm talking about live (it is still very much in development so please be mindful of some of the css looking terrible): text

I tried building a component that automatically refreshes the page, thinking that this might the problem. I also tried to force the state to update by adding a div with a counter that updates every 100 ms to update the carousel state but it made no difference.