Input.tsx

import React from 'react'
import {DivError, DivFieldTools, LabelInputAddTool, TextareaDescriptionAddTool} from "./modal/Modal.styles";
import {Field, FieldAttributes, FormikErrors, FormikTouched, useFormikContext} from "formik";

interface InputProps extends FieldAttributes<any> {
    name: string;
    label: string;
}

export function Input({name, label, ...props}: InputProps) {
    const {errors, touched} = useFormikContext();
    return (
        <DivFieldTools>
            <LabelInputAddTool htmlFor={name}>
                {label}
            </LabelInputAddTool>
            <Field
                {...props}
                as={TextareaDescriptionAddTool}
                id={name + "-test"}
                name={name}
                placeholder="Descreva a ferramenta."
            />
            {errors[name as keyof FormikErrors<unknown>] && touched[name as keyof FormikTouched<unknown>] ? (
                <DivError>{errors[name as keyof FormikErrors<unknown>]}</DivError>
            ) : null}
        </DivFieldTools>
    )
}