How to use shift of middleware in order to keep it in view in your sample,I have tried code one, but it just dose not work! pls help me debugging my code as below

[yuquansi]

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>
      <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
      </div>
    </div>
  )
}
export default App