custom node of @ant-design/flowchart

Question

import { Flowchart } from '@ant-design/flowchart';
import "@ant-design/flowchart/dist/index.css";

const IndicatorNode = (props:any) => {
  const { size = { width: 120, height: 50 }, data } = props;
  const { width, height } = size;
  const { label = 'john', stroke = '#ccc', fill = '#fff', fontFill, fontSize } = data;

  return (
    <div
      className="indicator-container"
      style={{
        position: 'relative',
        display: 'block',
        background: '#fff',
        border: '1px solid #84b2e8',
        borderRadius: '2px',
        padding: '10px 12px',
        overflow: 'hidden',
        boxShadow: '0 1px 4px 0 rgba(0,0,0,0.20)',
        width,
        height,
        borderColor: stroke,
        backgroundColor: fill,
        color: fontFill,
        fontSize,
      }}
    >
      <div style={{ color: fontFill }}>{label}</div>
    </div>
  );
};

export designer = () => {
  return (
    <div style={{ height: 600 }}>
      <Flowchart
        onSave={(d) => {
          console.log(d);
        }}
        toolbarPanelProps={{
          position: {
            top: 0,
            left: 0,
            right: 0,
          },
        }}
        scaleToolbarPanelProps={{
          layout: 'horizontal',
          position: {
            right: 0,
            top: -40,
          },
          style: {
            width: 150,
            height: 39,
            left: 'auto',
            background: 'transparent',
          },
        }}
        canvasProps={{
          position: {
            top: 40,
            left: 0,
            right: 0,
            bottom: 0,
          },
        }}
        nodePanelProps={{
          position: { width: 160, top: 40, bottom: 0, left: 0 },
          defaultActiveKey: ['custom'], // ['custom', 'official']
          registerNode: {
            title: 'abc',
            key:"abc",
            nodes: [
              {
                component: IndicatorNode,
                popover: () => <div>abcs</div>,
                name: 'custom-node-indicator',
                width: 120,
                height: 50,
                label: 'abc',
                
              },
            ],
          },
        }}
        detailPanelProps={{
          position: { width: 200, top: 40, bottom: 0, right: 0 },
        }}
      />
    </div>
  );
}

I want to create new custom code with api configurations and once I click on that node it shows the editable custom properties on right panel. in custom node of @ant-design/flowchart can I add my custom editable properties? that are showing on right panel once I clink on node.. Can someone provide me any reference for that?