在ArrayItems中为Cards组件添加extra属性，渲染出现问题

[GArosy]

<SchemaField.Void
  name="volume_type_item"
  x-component="Card"
  x-component-props={{
    title: '挂载卷',
    size: 'small',
    headStyle: { backgroundColor: '#f5f5f5', fontSize: '14px' },
    style: { marginBottom: '20px' },
    extra: (
      <>
        <SchemaField>
          {/* <SchemaField.Void> */} // 在外层再包一层Void则不会出现问题
            <SchemaField.Void x-component="ArrayItems.Remove" />
            <SchemaField.Void x-component="ArrayItems.MoveDown" />
            <SchemaField.Void x-component="ArrayItems.MoveUp" />
          {/* </SchemaField.Void> */}
        </SchemaField>
      </>
    ),
  }}
>

我想实现一组ArrayCards，要求它们的title为动态且相互独立。formily自己的ArrayCards似乎做不到这一点，于是我想到将antd的Cards组件放在ArrayItems中来实现。
其间我将ArrayItems封装的API按钮（3个）添加进Cards组件的extra属性中，出现了表单被挤掉的问题，似乎原先的表单内容被最后一个按钮替换了。但如果只添加2个以内的按钮，或者把三个按钮打包在一个<SchemaField.void>中就不会有问题。
我的写法是否有错？这样的需求是否有更好的实现办法？谢谢🙏

https://codesandbox.io/s/summer-platform-e3kscp?file=/App.tsx