<Input name="email" label="E-mail" variant="standard" disabled />
          <Input name="cpf" label="CPF" variant="standard" disabled />

 const handleSubmit: SubmitHandler = async (fieldValues) => {
        console.log(fieldValues);
  };

import { InputAdornment, TextFieldProps } from '@material-ui/core';
import { useField } from '@unform/core';
import { useEffect, useRef, FC, ReactNode } from 'react';
import InputMask from 'react-input-mask';
import TextField from './styles';

export type InputProps = TextFieldProps & {
  name: string;
  startAdornment?: ReactNode;
  variant: 'standard' | 'filled' | 'outlined';
  disabled?: boolean;
  mask?: string;
};

const Input: FC<InputProps> = ({
  name,
  label,
  required,
  placeholder,
  disabled,
  variant = 'standard',
  startAdornment,
  mask,
  ...rest
}) => {
  const ref = useRef();

  const { fieldName, registerField, defaultValue = '', error } = useField(name);

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

  const startAdornmentComponent = startAdornment && (
    <InputAdornment position="start">{startAdornment}</InputAdornment>
  );

  const textFieldProps = {
    error: !!error,
    helperText: error,
    variant,
    label,
    disabled,
    placeholder: disabled ? '' : placeholder,
    required,
    inputProps: {
      ref,
      id: fieldName,
      defaultValue,
      disabled
    },
    InputProps: {
      startAdornment: startAdornmentComponent
      // style
    },
    ...rest
  };

  return (
    <InputMask disabled={disabled} mask={mask}>
      {() => <TextField {...textFieldProps} />}
    </InputMask>
  );
};
export default Input;