virtualizer.getVirtualItems() mismatches with number provided in count attribute during initialisation

[mrthedubey]

Describe the bug

On Re-Render the number returned by virtualizer.getVirtualItems() is different than the number provided during initialisation of the virtualiser.

Initialising Virtualiser

const count = props.attributeGroups.length;
  const parentRef = React.useRef<HTMLDivElement>(null);
  const virtualizer = useVirtualizer({
    count,
    getScrollElement: () => parentRef.current,
    estimateSize: index => {
      const group = props.attributeGroups[index];
      let size = VIRTUALISED_ATTRIBUTE_GROUP_DEFAULT_SIZE;
      if (group) {
        size =
          group.attributes.length * VIRTUALISED_ATTRIBUTE_ELEMENT_DEFAULT_SIZE;
      }
      return size;
    },
    onChange: props.handleNavBarChangeOnScroll
  });

const items = virtualizer.getVirtualItems();
const totalSize = virtualizer.getTotalSize();



return (
    <div ref={parentRef}>
      <div id={`${props.currentMenu.name}-attributeGroupsContainer`} style={{ height: `${totalSize}px` }}>
        {items.map(virtualItem => (
          <div
            key={virtualItem.key}
            data-index={virtualItem.index}
            ref={virtualizer.measureElement}
            style={{
              position: "relative",
              width: "100%",
            }}
          >
            <GroupContainer
              {...props}
              key={props.attributeGroups[virtualItem.index].name}
              group={props.attributeGroups[virtualItem.index]}
            />
          </div>
        ))}
      </div>
    </div>
  );

Obeserved : In the above code with console.log(), items.length and count are different (items.length is 8 whereas count is 21) for some reason when props change but the totalSize however is computed for 21 components (more than required) due to which there is a empty section on the page.

Expected: Both items.length and count should be the same. (Please correct me if I am wrong in assuming this)

Regards, Abhishek

Your minimal, reproducible example

NA

Steps to reproduce

NA

Expected behavior

Obeserved : In the above code with console.log(), items.length and count are different (items.length is 8 whereas count is 21) for some reason when props change but the totalSize however is computed for 21 components (more than required) due to which there is a empty section on the page.

Expected: Both items.length and count should be the same. (Please correct me if I am wrong in assuming this)

How often does this bug happen?

None

Screenshots or Videos

No response

Platform

Chrome, Mozilla

tanstack-virtual version

3.0.0-beta.54

TypeScript version

4.9.5

Additional context

No response

Terms & Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.