Tengo la siguiente superposición que contiene un selector de color:

 <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>

Cada vez que hago clic en el elemento que abre esta superposición, aparece la superposición, pero inicialmente no está colocada correctamente en relación con el objetivo. Curiosamente, una vez que cambio el tamaño del navegador incluso 1 px, se vuelve a colocar donde se supone que debe estar. Esto se convirtió en un problema después de actualizar Bootstrap de v4 a v5 y Bootstrap-React de v1 a v2. Por lo que he visto en la documentación, las propiedades de destino y ubicación son las mismas, por lo que no estoy seguro de qué podría estar causando esto. Cuando inspecciono la superposición para ver por qué está colocada allí, veo esto:

Antes de cambiar el tamaño:

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

Después de cambiar el tamaño:

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

Antes de cambiar el tamaño:

Después de cambiar el tamaño:

¿De dónde podría estar viniendo este problema?