Написание пользовательского компонента по модели CheckboxGroupInput

Question

Я хотел бы написать собственный компонент для react-admin, Его поведение будет таким же, как CheckboxGroupInput; единственное отличие состоит в том, что я хотел бы организовать флажки в соответствии с определенным образом в таблице.

В настоящее время я использую CheckboxGroupInput сюда:

<CheckboxGroupInput
    source="data"
    choices={[
      { id: 'id1', name: 'id1' },
      { id: 'id2', name: 'id2' },
      { id: 'id3', name: 'id3' },
    ]}
  />

Флажки отображаются в одной строке, я не контролирую это.

Я хотел бы иметь следующее:

<PromotionPicker
    source="data"
  />

Различные варианты будут скрыты в CustomInput (поскольку они не изменяются) и отображаются определенным образом в таблице.

Проблема в том, что я не знаю, как этого добиться.

• Должен ли я создать компонент и использовать композицию с существующим CheckboxGroupInputкак поведение такое же? Найдите способ переписать render() только метод?
• Должен ли я написать совершенно новый компонент? Если да, есть ли у вас какие-либо ресурсы или идеи? Я прочитал документ о пользовательских вводах. Это применимо в этом случае? Кажется, о <Field> составная часть.

Вот что я попробовал:

const renderPromotionPicker = ({ input, meta: { touched, error } }) => (
<Table>
    <TableHead>
      <TableRow>
        <TableCell>Col 1</TableCell>
        <TableCell>Col 2</TableCell>
        <TableCell>Col 3</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell>
          <Checkbox id={'id1'} value={'val1'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id2'} value={'val2'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id3'} value={'val3'} />
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell>
          <Checkbox id={'id4'} value={'val4'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id5'} value={'val5'} />
        </TableCell>
        <TableCell>
          <Checkbox id={'id6'} value={'val6'} />
        </TableCell>
      </TableRow>
    </TableBody>
  </Table>
);

const PromotionPicker = ({ source }) => <Field name={source} component={renderPromotionPicker} />
export default PromotionPicker;

Проблема с этим кодом заключается в том, что я не получаю данные, предоставленные source={data}тем самым флажки не отражают ожидаемые данные.

Спасибо за ваши предложения!