import React, { InputHTMLAttributes, useEffect, useRef } from 'react';
import { useField } from '@unform/core';

const Input: React.FC<InputProps> = ({ name, icon: Icon, ...rest }) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const {
    fieldName, defaultValue, error, registerField,
  } = useField(name);

  useEffect(() => {
    registerField({
      name: fieldName,
      ref: inputRef.current,
      path: 'value',
    });
  }, [fieldName, registerField]);

  return (
    <div className="input-container">
      {Icon && <Icon size={20} color="#fff" />}
      <input
        defaultValue={defaultValue}
        ref={inputRef}
        {...rest}
      />
    </div>
  );
};

export default Input;

import { Form } from '@unform/web';
import { FormHandles } from '@unform/core';
const formRef = useRef<FormHandles>(null);

<Form  ref={formRef} onSubmit={handleSubmit}>
            <Input name="name" icon={FiUser} placeholder="Nome" type="text" />
            <Input name="email" icon={FiMail} placeholder="E-mail" type="email" />
            <Input name="password" icon={FiLock} placeholder="Senha" type="password" />
            <Button type="submit">Cadastrar</Button>
</Form>

    "@unform/core": "2.1.5",
    "@unform/web": "2.1.5",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "typescript": "^4.1.2",