javascript - GlideJS - React コンポーネントでスライドを使用するときの奇妙な動作

Question

React プロジェクトで GlideJS を使用していますが、奇妙な動作を返しています。コンポーネントはビューごとに 1 つ表示されず、幅が変更されます。

コンポーネント:

import React, { Component } from "react";
import Glide from "@glidejs/glide";

export default class SliderGlide extends Component {
  state = { id: null };

  componentDidMount = () => {
    // Generated random id
    this.setState(
      { id: `glide-${Math.ceil(Math.random() * 100)}` },
      this.initializeGlider
    );
  };

  initializeGlider = () => {
    this.slider = new Glide(`#${this.state.id}`, this.props.options);
    this.slider.mount();
  };

  componentWillReceiveProps = newProps => {
    if (this.props.options.startAt !== newProps.options.startAt) {
      this.slider.go(`=${newProps.options.startAt}`);
    }
  };

  render = () => (
    <div
      id={this.state.id}
      className="mt-10"
      style={{ overflowX: "hidden", userSelect: "none", maxWidth: "100vw" }}
    >
      <div className="glide__arrows" data-glide-el="controls">
        <button
          className="glide__arrow glide__arrow--left rounded-full"
          data-glide-dir="<"
          title="Veja mais ofertas!"
        >
          <span className="hidden">Anterior</span>
        </button>
        <button
          className="glide__arrow glide__arrow--right rounded-full"
          data-glide-dir=">"
          title="Veja mais ofertas!"
        >
          <span className="hidden">Próximo</span>
        </button>
      </div>
      <div className="glide__track" data-glide-el="track">
        <div className="glide__slides" style={{ display: "flex" }}>
          {this.props.children.map((slide, index) => {
            return React.cloneElement(slide, {
              key: index,
              className: `${slide.props.className} glide__slide`
            });
          })}
        </div>
      </div>
      <div className="glide__bullets" data-glide-el="controls[nav]">
        {this.props.children.map((slide, index) => {
          return <button key={index} className="glide__bullet rounded-full" data-glide-dir={"=" + index} />;
        })}
      </div>
    </div>
  );
}

SliderGlide.defaultProps = {
  options: {}
};

したがって、Carousel コンポーネント内で、コンポーネントである子とグライドのオプションを渡します。

const Plans = ({ plans, handleOffer }) => {
  const carouselOptions = {    type: 'slide',
  perView: 1,
  startAt: 0,


}

 return (
    <div className="section__slider relative mt-10 flex justify-center items-center">
        <Carousel options={carouselOptions}>
      { plans.map((plan, i) => {
         return (
            <OfferProduct key={i} i={i} plan={plan} handleOffer={handleOffer}/>

          )
        })
        }
        </Carousel> 
        </div>
        ) 
 }
export default Plans;

問題が自分のコードに関連しているかどうか、インポートする必要があるいくつかのスタイルシートが見つからないかどうか、または glide に渡されたアクションが間違っているかどうかを知りたいです。