Scroll to the view of the component after it renders a list of components

Question

Given a button that renders a component (CarCard), I need it to scroll down to it every time the button gets out of the viewport.

<PageWrapper>
   <CarCard data={filteredData} />
</PageWrapper>
   {!isAtListEnd && <LoadCardsButton>
     <button onClick={() => {
       setItemCount(itemCount + BATCH_SIZE)
      }}>
      Load Next
     </button>
</LoadCardsButton>}

The button renders a CarCard into a grid column of three elements, so whenever a fourth item is rendered and placed into the grid, the button gets out of the viewport.