I have the following Overlay that contains a color picker:

<Overlay target={pickerRef.current} show={isOpen} placement={overlayPlacement}>
    {(props) => (
        <PickerValues {...props}>
            {colors.map((color) => (
                <Color
                    key={color}
                    $color={baseColors[color]}
                    onClick={() => {
                        onSelect(color);
                        setSelectedColor(baseColors[color]);
                        setIsOpen(false);
                    }}
                />
            ))}
        </PickerValues>
    )}
</Overlay>

Whenever I click the element that opens this overlay, the overlay appears but initially it is not positioned correctly relative to the target. Interestingly, once I resize the browser by even 1 px, it gets re-positioned where its supposed to be. This became an issue after upgrading Bootstrap from v4 to v5 and Bootstrap-React from v1 to v2. From what I've seen in the documentation, that target and placement properties are the same so I'm not sure what might be causing this. When I inspect the overlay in order to see why it is positioned there, I see this:

Before resize:

position: absolute;
inset: 0px auto auto 0px;
transform: translate(10px, 219px);

After resize:

position: absolute;
inset: 0px auto auto 0px;
transform: translate(970px, 219px);

Before resize:

After resize:

Where might this issue be coming from?