why I cannot shift the floating element along the specified axes in order to keep it in view in my case?

Question

`import { shift, useFloating, } from '@floating-ui/react'

const App = () => { const { x, y, strategy, refs } = useFloating({ middleware: [shift({ mainAxis: true, crossAxis: true })] }) return ( <div style={{ backgroundColor: "black", width: '2000px', height: '2000px' }}> <div ref={refs.setReference} style={{ backgroundColor: "orange", width: "max-content" }}> reference element <div ref={refs.setFloating} style={{ backgroundColor: "blue", width: "max-content", position: strategy, top: y ?? 0, left: x ?? 0 }}> A floating element that shifts along the x-axis ) } export default App` enter image description here

I want to fix this issue