Does not scroll down progress bar when selecting sections not visible in bar

[dhyanaswain]

Scroll bar does not scroll with user, while scrolling in main screen, I have 2 scroll bar now, one is the native scrollbar and other one is the scroll bar i have added to the component

I have 14 item in the list A-N.

The scrollBar component height is same as the windows screen hight and fixed to top, when i scroll each item are getting highlighted but the scroll is not happening , to see the item which is not visible(J-N) right now in the screen and highlighted i need to scroll in the component itself,

if any one know how i can mount the windows scroll to the custom scroll please let me know

My code:

<div className="col-12 form-progress pt-3 mb-1">
   <Scrollbars className='form-progress__scrollableContent' key={`${props.id}-scrollableContent`}>
      {progressItems.map((itemProps: ProgressBarItemProps, idx: number) => (
          <ProgressBarItem
                 key={`key-${itemProps.name}`}
                 index={idx}
                 clickHandler={handleProgressSidebarClick}
                 name={itemProps.name}
                 status={itemProps.status}
                 arialabelScreenReader={itemProps.arialabelScreenReader}
         />
      ))}
  </Scrollbars>
</div>

what currently happening:

Expected: