How to re-render the context when a change occur in a nodes custom property?

[rahulnyk]

I am using Slate with Next(React) to create an editor. I have a custom element defined in the following manner.

  // Base Element type
  export type CustomBaseElement = {
      type: string;
      children: CustomDescendant[];
      notes: string[];
  };

So apart from children, I have a notes property in my custom element with a string array. I have created my custom UI elements (textarea) to render the notes. I am updating the editor on the textarea event like so

const handleInputChange = (event: any) => {
    setText(event.target.value);
    Transforms.setNodes(
        editor,
        { notes: [text] },
        { at: currentSectionHeadingPath }
    );
};

When I update any children on an element, slates useSlate lets me re-render the context and update any components that depend on it. e.g. a button activates only when there is a change in the editor. However, when I update the notes property, it does not update the editor context. How can I implement the same behaviour with notes?