Will result in multiple renderings

[whys-sf]

import {
  JSONUIProvider,
  Renderer,
} from "@json-render/react";
import { registry } from "./components/config";

export default function App() {
  const uiTree = {
    root: "chart",
    elements: {
      chart:{
        key:'chart',
        type:'Stack',
        props:{
          direction:'vertical',
          gap:'lg',
          className:'w-full'
        },
        children:['grid','label']
      },

      grid: {
        key: "grid",
        type: "CollapsibleItem",
        props: {
          title: "颜色",
          header: true,
          path: "/grid/enabled",
        },
        children: ["gridColor", "gridBgColor"],
      },
      gridColor: {
        key: "gridColor",
        type: "Input",
        props: {
          path: "/grid/color",
          type: "text",
          placeholder: "请输入颜色",
        },
      },
      gridBgColor: {
        key: "gridBgColor",
        type: "Input",
        props: {
          path: "/grid/bgColor",
          type: "text",
          placeholder: "请输入背景颜色",
        },
      },
      label: {
        key: "label",
        type: "CollapsibleItem",
        props: {
          title: "标题",
          header: true,
          path: "/label/enabled",
        },
        children: ["labelName", "labelSize"],
      },
      labelName:{
        key:'labelName',
        type:'Input',
        props:{
          path:'/label/name',
          type:'text',
          placeholder:'请输入标签名称'
        }
      },
      labelSize:{
        key:"labelsize",
        type:'Input',
        props:{
          path:'/label/size',
          type:'text',
          placeholder:'请输入标签大小'
        }
      }
    },
  };

  const handleChange = (path, value) => {
    console.log("handleChange", path, value);
  };

  return (
    <div className="p-8 min-h-screen bg-background">
      <h1 className="text-2xl font-bold mb-4">Config2 UI</h1>
      <div className="max-w-2xl">
        <JSONUIProvider
          onDataChange={handleChange}
          registry={registry}
          initialData={{
            grid: {
              enabled: true,
              color: "黑色",
              bgColor: "",
            },
            label:{
              enabled:true,
              name:'标签',
              size:'12px'
            }
          }}
        >
          <Renderer tree={uiTree} registry={registry} />
        </JSONUIProvider>
      </div>
    </div>
  );
}

When I update one of the inputs, it causes all the components to be re-rendered.

how to resolve ?