Render custom component

[Andonee]

Hey!
I am new with this awesome library and of course I have a problem.
I have this use case: there is an app and Plate editor with toolbar, but also with a couple of more buttons which are used for create inputs nodes (inputs are my components). I have some sample here codepenadbox example

I can see that my state is updating after user click "insert input" (in console) but I can't figure it out how to update editor. I tried to reset editor with useResetPlateEditor hook but it didn't work.
Now I am trying recommended solution (i guess) with Transforms.insertNodes.

Could anyone help me with my problem?
Matt

[Andonee]

I've solved this placing my input button in Toolbar and calling this function on click:

import {
getPluginType,
insertNodes,
PlateEditor,
Value,
withoutNormalizing
} from "@udecode/plate-core";

const VARIABLE_NODE = "variable-node";
export const insertInput = (editor: PlateEditor) => {
withoutNormalizing(editor, () => {

insertNodes<any>(editor, {
  type: getPluginType(editor, VARIABLE_NODE),
  children: [{ text: "" }],
});

});
};