Stuggling to get positioning to work with useMasonry

I managed to get things working quite quickly with the `Masonry` component, but after reading in the docs that you could avoid the need for a resize observer by using `useMasonry` I decided to try and switch to that approach.

Unfortunately it's not quite working right, the first few items are being positioned on top of each other. It's not obvious how to go about diagnosing why that is. I'm hoping there's something obvious that I've overlooked that you might be able to point out!

I put together a small codesandbox: https://codesandbox.io/s/modest-feynman-02o4y9

Start by reproducing the overlapping items in the linked CodeSandbox and compare the useMasonry setup with the working Masonry component and its documentation. Trace the positioning inputs used by useMasonry; done means the initial items receive distinct positions without relying on a resize observer.

Written by the indexing model from the issue text.