FromElements.js

import React from 'react';
import {useField} from 'formik';
import {FormFeedback, FormGroup, Input, Label} from 'reactstrap';

export const InputText = ({label, ...props}) => {
    props.type = props.type || 'text';
    const [field, meta, helpers] = useField(props);
    const id = `${field.name}Input`;
    const isInvalid = !!(meta.touched && meta.error);
    const errorMsg = meta.error || ' ';

    return (
        <FormGroup>
            <Label for={id}>{label}</Label>
            <Input id={id} {...field} {...props} invalid={isInvalid}/>
            <FormFeedback>{errorMsg}</FormFeedback>
        </FormGroup>
    );
};

export const InputEmail = (props) => {
    return <InputText {...props} type={'email'}/>
};

export const InputPassword = (props) => {
    return <InputText {...props} type={'password'}/>
};