I have a ScrollBar that receives the CardsContainer as a ref in order to be able to display some HTML elements under it that allow for some custom scroll behavior.

The issue is, even if the state is updated and the cards are rerendered, the ScrollBar will still receive the old node because the node is creating while ScrollBar is rendered. How could I get around this?

  return (
        <div>
            <CardsContainer ref={nodeRef}>
              {cards.map((card, index) => (
                <Card
                  {...card}
                  index={index}
                  onClickDismiss={handleDismiss}
                />
              ))}
            </CardsContainer>
            <ScrollBar container={nodeRef} />
          </>
        </div>
      )

where

  const handleDismiss = (index: number) => {
    setCards([...cards.filter((c, i) => i !== index)])
  }

P.S. As requested, code of a button click event handler inside ScrollBar:

  const onClickRightArrow = () => {
    isArrowScroll.current = true
    if (activeIndex < container.children.length - 1) {
      container.children[activeIndex + 1].scrollIntoView({
        behavior: 'smooth',
        block: 'nearest',
        inline: 'center',
      })
      setActiveIndex(activeIndex + 1)
    }
  }