reactjs - A propriedade 'onClick' não existe no tipo '{ children?: ReactNode; }'

Parece que não consigo encontrar o que estou fazendo de errado... Qualquer ajuda será apreciada:

type Props = {
  onClick: () => void, 
  value: string
}

const CustomInput = forwardRef<Props>(({ onClick, value }, ref) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));


error message: Property 'onClick' does not exist on type '{ children?: ReactNode; }

exportar padrão CustomInput;

Resposta #1

O genérico Props deve ser usado como segundo argumento, não como o primeiro.

Exemplo :

type Props = {
  onClick: () => void, 
  value: string
}

type RefType=number
const CustomInput = forwardRef<RefType, Props>(({ onClick, value }, ref) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));

O primeiro argumento genérico de forwardRef é para o tipo de ref, o segundo - para props, respectivamente

Resposta #2

Você pode digitar adicionando desta forma:

type Props = {
  onClick: () => void, 
  value: string
}

const CustomInput = forwardRef<Props>(({ onClick, value }:Props, ref:any) => (
  <div className="react-datepicker-custom-input" onClick={onClick}>
    {value}
    <i className={classes.arrowDown}></i>
  </div>
));