TypeError: Cannot read properties of undefined (reading 'eventController')

[frodolfo-duclo]

Hello,

I have a React app where I render an array of items in a grid that users can resize and re-arrange. On dragStart I save grid items and the slots (styles) to a data store. I offer the user a Reset button which should restore the original layout on page load. To accomplish this reset functionality, I do the following:

On dragStart

• Retrieve all grid item elements via document.querySelectorAll()
• Save this to a state variable
• Retrieve the inline style for each element via elenent.attributes.style.value
• Save this to a state variable

In the Reset function

• Remove all the grid items via the .remove([item]) method
• Retrieve the saved grid elements
• For each saved grid element, I add it to the grid via the .add([element]) method
• I call the .synchronize() method

NOTE: I save the styles above to account for saved layouts that can be loaded -- I also have a Save layout function

So the reset works and I'm able to restore the original layout on page load, whether it's the default layout or a saved layout that was stored. The problem is I replace the grid items with the ones that were saved previously, I am not able to drag the items to change their positions within the grid. I get the following error instead:

TypeError: Cannot read properties of undefined (reading 'eventController')

Am I not doing this correctly? What's missing?