plugin growth – Gutenberg’s Popover part place relative to the centered aspect

I’m creating a web site the place we need to use Gutenberg’s Popover part to point out customized choices within the Popover when a particular secret’s entered within the block editor. I’ve used KeyboardShortcuts part to register a brand new shortcut, now I’m attempting to combine the Popover. For some cause, Popover shouldn’t be getting positioned relative to the centered aspect within the block editor and it exhibits within the left nook of the doc.

How might we place it within the block editor identical to Blocks popover?

Core Block Popover place: https://i.rankmath.com/2FdwJW

Customized Popover place: https://i.rankmath.com/90mvwv

Right here is my code:

const [ popoverAnchor, setPopoverAnchor ] = useState()
const [ isAllSelected, setIsAllSelected ] = useState( false )
const selectAll = ( e ) => {
    doc.activeElement.setAttribute( 'ref', setPopoverAnchor )
    setTimeout( () => {
        setIsAllSelected( true )
    }, 1000 )
}

return (
    <div>
        <KeyboardShortcuts
            shortcuts={ {
                'mod+/': selectAll,
            } }
            bindGlobal="true"
        />
        [cmd/ctrl + A] Mixture pressed? { isAllSelected ? 'Sure' : 'No' }
        { isAllSelected && <Popover anchor={ popoverAnchor } yAxis="high" xAxis="proper">Popover is toggled!</Popover> }
    </div>
)