Chakra UIのRadio GroupをReact Hook Form x Yupでバリデーションを効かせながら実装する

import { Box, Button, useRadio } from '@chakra-ui/react'
import React, { forwardRef } from 'react'

type InputProps = JSX.IntrinsicElements['input']

const GenderRadio = forwardRef<HTMLInputElement, InputProps>(
  ({ ...props }, ref) => {
    const { state, getInputProps, getCheckboxProps } = useRadio(props)
    const input = getInputProps({ ref })
    const checkbox = getCheckboxProps()

    return (
      <Box as="label">
        <input {...input} />
        <Button
          as="div"
          {...checkbox}
          cursor="pointer"
          colorScheme={state.isChecked ? 'red' : 'gray'}
        >
          ボタンです
        </Button>
      </Box>
    )
  }
)
GenderRadio.displayName = 'GenderRadio'

export default GenderRadio

TS2345: Argument of type '{ ref?: LegacyRef<HTMLInputElement> | undefined; key?: Key | null | undefined; accept?: string | undefined; alt?: string | undefined; autoComplete?: string | undefined; ... 282 more ...; onTransitionEndCapture?: TransitionEventHandler<...> | undefined; }' is not assignable to parameter of type 'UseRadioProps'.   Types of property 'value' are incompatible.     Type 'string | number | readonly string[] | undefined' is not assignable to type 'string | number | undefined'.       Type 'readonly string[]' is not assignable to type 'string | number | undefined'.