Reactjs 在React recharts CustomContentTreemap中，如何使文本可见？

我正在使用自定义内容树映射。在这种情况下，从json数据获取的每个子级的颜色 下面是示例JSON数据

const data = [
          {
            name: 'AAA',
            children: [
              { name: 'A1', size: 1302, color:"red" },
              { name: 'A2', size: 24593, color:"blue" }      
            ],
          },
          {
            name: 'BBB',
            children: [
              { name: 'B1', size: 2138, color: "red" },
              { name: 'B2', size: 3824, color: "blue"}
            ],
          },
          {
            name: 'CCC',
            children: [
              { name: 'C1', size: 20544,color:"red"},
              { name: 'C2', size: 19788, color:"blue" }
            ],
          }
        ];
  

根据这个颜色，我将填充这个盒子。我需要在框的中间显示父名。 这里是JSfiddle链接