【react】gsapのScrollTriggerのpinを使うと、別ページ移動時にエラーが出るの解決方法

エラー内容

Unhandled Runtime Error
NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

Before

  useEffect(() => {
    const pagesEl = pagesRef?.current
    if (!pagesEl) return
    const pagesWrapperEl = pagesWrapperRef?.current
    if (!pagesWrapperEl) return
    const verticalTextEl = verticalTextRef?.current
    if (!verticalTextEl) return

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '#horizontal-scroll',
        start: 'top -40rem',
        end: () => `+=${pagesEl.clientWidth - pagesWrapperEl.clientWidth}`,
        scrub: 0.3,
        pin: true,
        anticipatePin: 1,
        invalidateOnRefresh: true,
      },
    })

    tl.to(pagesEl, {
      x: () => -(pagesEl.clientWidth - pagesWrapperEl.clientWidth),
    })
  }, [])

After

  useLayoutEffect(() => {
    const pagesEl = pagesRef?.current
    if (!pagesEl) return
    const pagesWrapperEl = pagesWrapperRef?.current
    if (!pagesWrapperEl) return
    const verticalTextEl = verticalTextRef?.current
    if (!verticalTextEl) return

    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: '#horizontal-scroll',
        start: 'top -40rem',
        end: () => `+=${pagesEl.clientWidth - pagesWrapperEl.clientWidth}`,
        scrub: 0.3,
        pin: true,
        anticipatePin: 1,
        invalidateOnRefresh: true,
      },
    })

    tl.to(pagesEl, {
      x: () => -(pagesEl.clientWidth - pagesWrapperEl.clientWidth),
    })

    return () => {
      ScrollTrigger.killAll()
    }
  }, [])

載せるためにちょっとコードを省いたので、へんなところがあったらごめんなさい。
みそは、useLayoutEffectに変わってるところ。
その中の最後のクリーンアップ関数で、アンマウント時にScrollTriggerをkillしてます。
これで別ページ遷移時に消えるので、エラーがなくなります。

[参考]
https://greensock.com/forums/topic/28327-scrolltrigger-breaks-react-router/