React virtualized List Scroll issue

Question

So I have a sidebar where am trying to implement react virtualized list. The way it works is:

• Sidebar has an accordian with headers and react virtualized list as content. Sidebar has fixed width
  • Clicking on header will collapse other lists and open the corresponding list which will take up all the available height
  • New items can be added to these lists dynamically and the list height will keep changing.

Issues am facing:

• On trying to scroll the scrollbar flickers and just jumps all the way to the bottom of list and sticks there making it impossible to scroll back up.
• There is a lot of white space added at the bottom.
• the list items in between keep flickering while scrolling
• at times 2 scroll markers show up

below is my code:

<AutoSizer>
        {({ width, height }) => (
          <List
            className="lazyList"
            width={300}
            height={height}
            overscanRowCount={5}
            rowCount={collection.length}
            rowHeight={200}
            rowRenderer={renderListItems}
          />
        )}
      </AutoSizer>

Below is the rendered HTML

<div class="listWrapper listActive" style="position: relative; overflow-y: hidden; max-height: 233px; height: 233px;">
   //This I assume is the autosizer... notice how its height is 0
    <div style="overflow: visible; height: 0px;">
      <div aria-label="grid" class="ReactVirtualized__Grid ReactVirtualized__List lazyList" role="grid" tabindex="0" style="box-sizing: border-box; direction: ltr; height: 233px; position: relative; width: 240px; will-change: transform; overflow-x: hidden; overflow-y: auto;">
         <div class="ReactVirtualized__Grid__innerScrollContainer" style="width: auto; height: 450px; max-width: 240px; max-height: 450px; overflow: hidden; position: relative;">
            <div data-id="c108" id="4515846326789249667" class="list-item summary-list" data-index="aaa 1">
                Item 1
            </div>
            <div data-id="c109" id="45158463267892496637" class="list-item summary-list" data-index="aaa3 1">
                Item 2
            </div>
            <div data-id="c101" id="45158463267892439667" class="list-item summary-list" data-index="aaa4 1">
                Item 3
            </div>
            <div data-id="c102" id="45158463267892439667" class="list-item summary-list" data-index="aaa5 1">
                Item 4
            </div>

         </div>
      </div>
   </div>
   <div class="resize-triggers">
      <div class="expand-trigger">
         <div style="width: 241px; height: 233px;"></div>
      </div>
      <div class="contract-trigger"></div>
   </div>
</div>