javascript - Slatejs and React-select: setNodes causes an infinite recursion while rendering?

Question

Within a custom element in my Slate.js editor, I have this logic for updating the properties of the element:

    const changeProps = ({name, opts, defaultValue}: TemplateBlockProps) => {
        let path = ReactEditor.findPath(editor, element)
        let newProps = {name, opts, defaultValue}
        Transforms.setNodes(editor, newProps, {at:path})
    }

The idea is that you can use react-select to create and select values in a template field. However, when calling Transforms.setNodes to update the node properties in the Slate DOM, React gives me an infinite loop error, saying that it is re-rendering too many times. The logic is itself similar to the embeds example on Slate's website. What is going on here? How can it be fixed?

CodeSandbox here: https://codesandbox.io/s/compassionate-meadow-fbrne?file=/src/App.tsx

question from:https://stackoverflow.com/questions/65865935/slatejs-and-react-select-setnodes-causes-an-infinite-recursion-while-rendering

Answer 1

Waitting for answers