Создать свой radio/checkbox компонент

Нужно создать что-то по типу RadioGroup для radio и checkbox.
Только проблема в том, что я совсем запутался и не могу понять как это должно работать и, пытаюсь сделать preview компонента с radio и checkbox, но из-за того, что запутался не могу и этого сделать.
Вот код моего бокса:

import React, { Children, cloneElement } from 'react'
import PropTypes from 'prop-types'

export const UnionBox = ({ type, children }) => {
  const clickHandler = (id) => {
    console.log(id)
  }
  const renderRadioChildren = () => {
    return Children.map(children, child => {
      return cloneElement(child, {
        name: 'radiobtn',
        clickHandler,
      })
    })
  }
  const renderCheckBoxChildren = () => {
    return Children.map(children, child => {
      return cloneElement(child, { clickHandler })
    })
  }
  return (
    <div>
      {
        type === 'radio' ? renderRadioChildren : renderCheckBoxChildren
      }
    </div>
  )
}

UnionBox.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.element),
    PropTypes.element.isRequired,
  ]),
  type: PropTypes.oneOf([ 'radio', 'checkBox' ]),
}

Preview которое я пытаюсь сделать. Конечно, тут по сути ничего нету, но я думаю что суть ясна - что я хочу сделать - контейнер, который будет контролировать состояние radio и checkbox. Ну и само собой, если у меня получится это реализовать, то я получу представление как создать свою форму.

import React from 'react'
import { UnionBox } from './UnionBox'
import { Radio } from '../Radio/Radio'

export const UnionBoxPreview = () => {
  return (
    <UnionBox>
      <Radio id='1' label='val1'/>
      <Radio id='2' label='val2'/>
    </UnionBox>
  )
}

Цель моего проекта проста - создать свою библиотеку компонентов с целью углубления навыков и понимания как устроены библиотеки такого рода.