Как использовать хуки React в Gutenberg block?

Пытался данный слайдер закинуть как плагин для Worpress в виде Gutenberg block. Сам блок пробовал создавать и через create gutenberg block и через innit @wordpress/block. Каждый раз ситуация одна и та же. Стоит мне хотя бы попытаться использовать хуки useState(он не такой проблематичный, как я понял его аналог это attributes и setAttributes) и/или useEffect, блок в Wordpress выдаёт ошибку. Мол блок содержит ошибку и потому просмотр не доступен. И, собственно говоря вопрос. А как же всё таки перенести этот слайдер в Gutenberg на React?

import { useState, useEffect, useRef } from "react";
import { LeftArrow } from "./Arrows/LeftArrow";
import { RightArrow } from "./Arrows/RightArrow";
import { Logo } from "./logo";

// import { ExSliderList } from "./ExSliderList";

const ExSider = () => {
  // Индекс текущего слайда
  const [activeIndex, setActiveIndex] = useState(0);
  // const [items, setitems] = useState([]);
  const autoplayIdRef = useRef(null);

  const items = [
    <div>
      <h3>Header</h3>
      <span>
        Lorem ipsum dolor sit amet, consect etur adipiscing elit. Aenea uismod
        bibendum laoreet. Lorem ipsum dolor sit amet.
      </span>
    </div>,
    <div>
      <h3>Ultra mega long header</h3>
      <span>Lorem ipsum dolor sit amet.</span>
    </div>,
    <div>
      <h3>Heading</h3>
      <span>Lorem ipsum dolor sit amet.</span>
      <Logo />
    </div>,
  ];

  const nextSlide = () => {
    setActiveIndex((current) => {
      const res = current === items.length - 1 ? 0 : current + 1;
      return res;
    });
  };

  const prevSlide = () => {
    setActiveIndex((current) => {
      const res = current === 0 ? items.length - 1 : current - 1;
      return res;
    });
  };

  useEffect(() => {
    autoplayIdRef.current = setInterval(() => {
      setActiveIndex((current) => {
        const res = current === items.length - 1 ? 0 : current + 1;
        return res;
      });
    }, 5000);
    return () => {
      autoplayIdRef.current && clearInterval(autoplayIdRef.current);
      autoplayIdRef.current = null;
    };
  }, [activeIndex]);

  const prevImgIndex = activeIndex ? activeIndex - 1 : items.length - 1;
  const nextImgIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;

  return (
    <>
      <div className="slider">
        <div className="slider-img prev" key={prevImgIndex}>
          {items[prevImgIndex]}
        </div>
        <div className="slider-img" key={activeIndex}>
          {items[activeIndex]}
        </div>
        <div className="slider-img next" key={nextImgIndex}>
          {items[nextImgIndex]}
        </div>
      </div>
      <RightArrow prevSlide={prevSlide} />
      <LeftArrow nextSlide={nextSlide} />
    </>
  );
};

export { ExSider };