Why is scrollToActiveItem prop not working in blueprintjs Select2 component?

Question

<Select2
    filterable={true}
    items={userItems}
    itemPredicate={filterItem}
    itemRenderer={renderItem}
    onItemSelect={handleItemSelect}
    noResults={<MenuItem2 disabled={true} text="No results." />}
    activeItem={ingredient}
    popoverProps={{
        matchTargetWidth: true,
        minimal: true,
        popoverClassName: "menu-items",
    }}
    inputProps={{
        placeholder: "Ingredient search...",
    }}
    >
        <Button
            text={
                ingredient.name !== "new item"
                    ? ingredient.name +
                    ", " +
                    ingredient.size +
                    ingredient.unit +
                    ", " +
                    ingredient.cost +
                    " kr"
                    : "Select item"
            }
            minimal
            alignText="left"
            rightIcon="double-caret-vertical"
            placeholder="Select vendor"
            className="w-100"
        />
</Select2>

Basically I have userItems which is basically an array of objects that would look something like this:

{
    id: "item_id",
    name: "item_name",
    unit: "item_unit",
}

activeItem={ingredient} is basically an object that has been selected from the select component above. After choosing an item, the item gets highlighted, which is the correct behavior. I know from the documentation that scrollToActiveItem is set to true as default. But somehow, it is not scrolling to the active item, rather it stays to the most top. What am I missing here? I would love to provide you with more information needed.

Extra information that might help out:

function textFormatter(item: Items): JSX.Element {
    return (
      <div>
        {item.name}, {item.size} {item.unit}[{item.cost}kr]{" "}
        <span className="bp4-text-muted">
          {item.type} - {item.variety}
        </span>
      </div>
    );
  }

  const filterItem: ItemPredicate<Items> = (query, item) => {
    return (
      `${item.name.toLowerCase()}, ${item.size} ${item.unit}[${item.cost}kr] ${
        item.type
      } - ${item.variety}`.indexOf(query.toLowerCase()) >= 0
    );
  };

  const renderItem: ItemRenderer<Items> = (
    item: Items,
    { modifiers, handleClick }: ItemRendererProps
  ) => {
    if (!modifiers.matchesPredicate) {
      return null;
    }
    return (
      <MenuItem2
        key={`${item.id}-${item.name}`}
        active={modifiers.active}
        multiline
        onClick={handleClick}
        roleStructure="listoption"
        text={textFormatter(item)}
      />
    );
  };