Non string literal Element id result in corrupt json

[eschiebel]

Describe the bug The documentation states that an id prop is required on Element if used within a user component. This seems to work find if the id is set to a fixed string literal like id="bottom" but the json gets corrupted if set via a variable.

To Reproduce In the basic example

1. Edit examples/basic/components/user/Card.js
2. in the definition of Card, add const [bottomid] = useState(window.crypto.randomUUID()); then change the Element id for CardBottom from id="bottom" to id={bottomid}
3. on the demo page drag a new Card onto the page, then drag a new Button into the CardBottom.
4. Click "copy current state", then "load" and paste.
5. See that the button you dragged into the Card is not present.

Expected behavior I should either be able to programmatically set an Element id, or the documentation should state this needs to be a string literal

Screenshots If applicable, add screenshots to help explain your problem.

Additional context Add any other context about the problem here.

Your environment

Software	Version(s)
craft.js	0.2.0 and 0.2.6
React	16.14.0
TypeScript
Browser
npm/Yarn
Operating System

[dbjpanda]

Honestly, their basic example code needs a severe fix. Nothing works for me. Outdated Material ui etc in the example + this missing Element id error.

[eschiebel]

Sure, but I just leveraged the basic example as the shortest path to recreating the bug.