[Slot] how to slot a ReactComponent with custom event

[shaddollxz]

i have this component, it proxy a Input or Select or any have onValueChange compoent, how to fix the type error

export function NewItem({
  children,
}: {
  // this type define not works
  children: ReactElement<{ onValueChange: (v: string) => void }>
}) {
  const dispatch = useDispatch()

  return (
    <Slot
      // type error, slot not have onValueChange
      onValueChange={(name: string) => {
        dispatch({
          type: 'add',
          name,
        })
      }}
    >
      {children}
    </Slot>
  )
}

[shaddollxz]

It seems that the type problem can't be solved, so I followed Slot's implementation and used cloneElement to do what I needed.

export function NewItem({
  children,
}: {
  // this type define not works
  children: ReactElement<{ onValueChange?: (v: string) => void }>
}) {
  const dispatch = useDispatch()

  return React.cloneElement(children, {
    ...children.props,
    onValueChange: (v: string) => {
      children.props?.onValueChange(v)

      dispatch({
        type: 'add',
        name: v
      })
    }
  })
}