Using the Embla Carousel, React version, I'm trying to turn/on off the carousel based on breakpoint. So for mobile, it's on and for tablet up it's off. Here's what I tried that seems to work initially, but won't reinitialize. I'm guessing it's because destory was called so it can reInit and tried init, but no luck there either.

const emblaOptions = {};
  const [viewportRef, emblaApi] = useEmblaCarousel(emblaOptions);

  const handleEmblaInit = () => {
    if (window.innerWidth > 768) {
      emblaApi.destroy();
    } else {
      emblaApi.reInit(emblaOptions);
    }
  };

  useEffect(() => {
    if (emblaApi) {
      handleEmblaInit();
      window.addEventListener("resize", handleEmblaInit);
    }
  }, [emblaApi]);