[React 19] Element component ref access error prevents dynamic canvas creation

[BuhayovA]

Describe the bug CraftJS Element component throws React 19 compatibility error: "Accessing element.ref was removed in React 19. ref is now a regular prop." This occurs when dynamically creating multiple Element components in an array/loop, preventing proper rendering and causing the application to display the error overlay.

To Reproduce Steps to reproduce the behavior:

1. Create a component that dynamically generates multiple CraftJS Element components using Array.from() or similar methods
2. Use the Element component with canvas prop inside the array mapping
3. Try to render the component in a React 19 application
4. See error: "Accessing element.ref was removed in React 19"

Example code that triggers the error:

const columnsElements = Array.from({ length: columns }, (_, index) => (
  <Element
    key={`column-${index}`}
    canvas
    is="div"
    id={`column-${index}`}
    style={{...}}
  >
    Content here
  </Element>
));

Expected behavior The Element components should render without errors and work correctly with React 19, allowing proper drag-and-drop functionality and canvas behavior.

Screenshots Error appears in browser console and React error overlay showing the ref-related warning at the specific line where Element is used.

Additional context This issue appears to be related to React 19's removal of the element.ref property access. The problem occurs specifically when Element components are created dynamically in arrays or loops. Static Element usage seems to work fine.

Temporary workaround: Wrapping the Array.from() call in React.useMemo() reduces the frequency of the error but doesn't eliminate it completely.

Your environment

Software	Version(s)
craft.js	0.2.12
React	19.0.0
TypeScript	5.8.0
Browser	Chrome/Safari/Firefox
npm/Yarn	pnpm 10.10.0
Operating System	macOS 24.5.0