Sidebar not getting sticky in html and react with gsap scroll smoother

I’m working on a frontend project with html, bootstrap, scss, jquery and for animation I’m using gsap. Everything is working good, the problem is, I’ve a blog details page, it has three unequal columns, I positioned them sticky and they working nicely to each other until I used gsap scroll smoother plugin. For project requirement I can’t omit gsap and also I’ve to do the section sticky.
In that case, how can I fix the codes so the sticky position works everywhere.

This is my current code

    if ($(".blog-main__sidebar").length > 0) {
      if (device_width >= 1200) {
        const sidebar = $(".blog-main__sidebar");
        const tl = gsap.timeline({
          scrollTrigger: {
            trigger: sidebar,
            start: "top top",
            end: "bottom bottom",
            pin: true,
            pinSpacing: false,
            markers: false,
            invalidateOnRefresh: true,
          },
        });
      }
    }

If I use this, sticky works but it overlaps the bottom section, and also in responsive it not works perfectly.

Thanks in advance