Dynamically appended transform style cause problem?

[agmmnn]

I have a component that dynamically generates a transform style according to the number of items. But it seems that this post style assignment is causing problems for dnd-kit..? Can anyone help?

codesandbox: https://codesandbox.io/p/sandbox/elastic-forest-e6iecu

chrome_BwHOZjirT9.mp4

[agmmnn]

I created a parent div element and moved the style there and it worked.

edited code:
https://codesandbox.io/p/sandbox/frosty-wave-mptnz4

before:

    <div
      ref={setNodeRef}
      style={{
        transform: transform,
      }}
    >
      {children}
    </div>

after:

    <div
      style={{
        transform: transform,
      }}
    >
      <div
        ref={setNodeRef}
      >
        {children}
      </div>
    </div>