How to populate fields in reactjs formik - reactjs

Question

I'm new to formik and i am trying to populate an edit page where users can edit existing fields with formik. I keep getting React Hook "useEffect" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function react-hooks/rules-of-hooks error. I used the react useEffect hook to try and get the data from the backend.
function Edit({ history, match }) {
const { id } = match.params;
const isAdd = !id;
const initialValues = {
firstName: '',
lastName: '',
};
const validationSchema = Yup.object().shape({
firstName: Yup.string()
.required('First Name is required'),
lastName: Yup.string()
.required('Last Name is required'),
});
return (
<Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={()={}}>
{({ errors, touched, isSubmitting, setFieldValue }) => {
useEffect(() => {
if (!isAdd) {
getById(id).then(user => {
const fields = ['firstName', 'lastName'];
fields.forEach(field => setFieldValue(field, user[field], false));
});
}
}, []);
return (
<Form>
<div className="form-group col-5">
<label>First Name</label>
<Field name="firstName" type="text" className={'form-control' +
(errors.firstName && touched.firstName ? ' is-invalid' : '')} />
<ErrorMessage name="firstName" component="div" className="invalid-
feedback" />
</div>
<div className="form-group col-5">
<label>Last Name</label>
<Field name="lastName" type="text" className={'form-control' +
(errors.lastName && touched.lastName ? ' is-invalid' : '')} />
<ErrorMessage name="lastName" component="div" className="invalid-
feedback" />
</div>
</div>
</Form>
);
}}
</Formik
)}
export { Edit };