custom node of #ant-design/flowchart - reactjs

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?