How to use the smooth-scrollbar.init function in smooth-scrollbar

inserted (el, binding) {
        const possibilities = [binding.value, options]
        const scrollbar = Scrollbar.init(el, bestOptions(possibilities))

        const listener = bestListener(possibilities)
        if (listener) scrollbar.addListener(listener)

        el.dispatchEvent(new CustomEvent('insert', { detail: el }))
      },
      componentUpdated (el, binding) {

useEffect(() => {
    setScrollbar(
      Scrollbar.init(scrollableElRef.current, {
        alwaysShowTracks: true,
        continuousScrolling: true,
      })
    );
  }, []);

init() {
        this.Scroll = Scrollbar.init(document.querySelector('.scrollarea'), {
            delegateTo: document,
            continuousScrolling : false,
            overscrollEffect: 'bounce',
            damping: 0.05,
            plugins: {
                horizontalScroll: {
                    events: [/wheel/],
                },
            },
        })

        this.Scroll.track.xAxis.element.remove()
        this.Scroll.track.yAxis.element.remove()

        Scrollbar.detachStyle()

initiateScrollbar() {
    const options = {};
    const element = document.querySelector('.tab-pane.active');
    if (element) {
      Scrollbar.init(element, options);
    }
   }

componentDidMount() {
    this.scrollbar = SmoothScrollbar.init(this.container, this.props);

    this.scrollbar.addListener(this.handleScroll.bind(this));

    this.props.innerRef(this.scrollbar);
  }

thumbMinSize: 20,
  renderByPixels: !('ontouchstart' in document),
  alwaysShowTracks: false,
  continuousScrolling: true,
};

const overscrollOptions = {
  enable: true,
  effect: navigator.userAgent.match(/Android/) ? 'glow' : 'bounce',
  damping: 0.2,
  maxOverscroll: 150,
  glowColor: '#222a2d',
};

const scrollbars = [
  Scrollbar.init(document.getElementById('main-scrollbar') as HTMLElement, {
    ...options,
    delegateTo: document,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
  Scrollbar.init(document.getElementById('inner-scrollbar') as HTMLElement, {
    ...options,
    plugins: {
      overscroll: { ...overscrollOptions },
    },
  }),
];
const controller = new dat.GUI();

function updateScrollbar() {

speed: variables.scrollBarMobileSpeed
                };
                transformDelta(delta, fromEvent) {
                    if (fromEvent.type !== 'touchend') {
                        return delta;
                    }

                    return {
                        x: delta.x * this.options.speed,
                        y: delta.y * this.options.speed
                    };
                }
            }
            Scrollbar.use(MobilePlugin);
        }
        variables.scrollBar = Scrollbar.init(
            variables.element,
            variables.scrollBarOptions
        );
        let position = 0,
            direction,
            isVisible;
        variables.scrollBar.addListener(status => {
            if (status.offset.y > position) {
                direction = 'down';
            } else {
                direction = 'up';
            }
            position = status.offset.y;
            for (let a = 0; a < variables.elements.length; a++) {
                isVisible = variables.scrollBar.isVisible(
                    variables.parentElements[a]

componentDidMount() {
        this.scrollbar = SmoothScrollbar.init(this.refs.container, this.props);

        this.callbacks.forEach((cb) => {
            requestAnimationFrame(() => cb(this.scrollbar));
        });

        this.scrollbar.addListener(::this.handleScroll);
    }