Why are my submitError's rendering on the second submit instead of the initial submit - forms

Question

I wanted to create a reusable component that could render server side errors if there are validation errors in the form. On the initial submit even if there are errors coming from the server, they will not be displayed until the "submit" button is pressed again. After the initial submit the meta: {touched} is not changing to true.
Tools Utilized:
"react-final-form": "^6.5.3",
"#material-ui/core": "^4.12.4",
This is my first time asking a question so if more information is needed let me know and I will try and provide you with the necessary information.
I have tried to add an onBlur to the TextField which does change the touched to true but still does not submit the error on the initial submit. I have also tried to switch the && and || to see if that would change anything but it doesn't.
Reusable Form Component (input/index.js)
/* eslint-disable implicit-arrow-linebreak */
import React, { useEffect } from 'react';
import { Field } from 'react-final-form';
import {
MaterialTextField,
} from '#/shared/components/form/MaterialFormElements';
const TextField = ({
input, label, meta: { touched, error, submitError }, children, select, multiline, name, maxLength, value,
}) =>
(
<MaterialTextField
label={label}
type={input.type}
error={touched && (error || submitError)}
helperText={touched && (error || submitError)}
value={input.value || value}
select={select}
multiline={multiline}
defaultValue={input.defaultValue}
name={name}
onChange={(e) => {
e.preventDefault();
input.onChange(e.target.value);
}}
style={{ width: '100%' }}
inputProps={{ maxLength }}
>
{children}
</MaterialTextField>
);
TextField.defaultProps = {
meta: null,
select: false,
children: [],
multiline: false,
};
const validate = value => (value ? undefined : 'Required');
export function Input({
name, label, required, select, children, maxLength,
}) {
return (
<div style={{ width: '100%' }}>
<Field
name={name}
label={label}
select={!!select}
validate={required && validate}
maxLength={maxLength}
>
{props => (
<div>
<TextField {...props}>
{children}
</TextField>
</div>
)}
</Field>
</div>
);
}
CreateCustomerForm.jsx
import React from 'react';
import { Form } from 'react-final-form';
import {
MaterialFormContainer,
ButtonWrap,
} from '#/shared/components/form/MaterialFormElements';
import { Button } from '#/shared/components/Button';
import PropTypes from 'prop-types';
import { Input } from '../../Input';
const CreateCustomerForm = ({ onSubmit, toggle, setError }) => {
const handleClick = (event) => {
event.preventDefault();
setError(false);
toggle(prevState => !prevState);
};
const fields = [
{
name: 'customerName', label: 'Customer Name', required: true, maxLength: 45,
},
{
name: 'address', label: 'Address', required: true, maxLength: 150,
},
{
name: 'city', label: 'City', required: true, maxLength: 45,
},
{
name: 'state', label: 'State', required: true, maxLength: 45,
},
{
name: 'zip', label: 'Zip Code', required: true, maxLength: 10,
},
{
name: 'phone', label: 'Phone', required: true, maxLength: 20,
},
{
name: 'primaryContactName', label: 'Primary Contact Name', required: true, maxLength: 90,
},
{
name: 'primaryContactEmail', label: 'Primary Contact Email', required: true, maxLength: 255,
},
{
name: 'customerKey', label: 'Customer Key', required: true, maxLength: 255,
},
];
return (
<Form onSubmit={onSubmit}>
{({ handleSubmit }) => (
<MaterialFormContainer onSubmit={handleSubmit}>
{fields?.map(field => <Input {...field} />)}
<ButtonWrap>
<Button variant="primary" type="submit">Submit</Button>
<Button variant="secondary" type="button" onClick={handleClick}>
Cancel
</Button>
</ButtonWrap>
</MaterialFormContainer>
)}
</Form>
);
};
CreateCustomerForm.propTypes = {
onSubmit: PropTypes.func.isRequired,
toggle: PropTypes.func.isRequired,
setError: PropTypes.func.isRequired,
};
export default CreateCustomerForm;
createCustomerModal.jsx
import React, { useEffect, useState } from 'react';
import {
StyledModal, ModalHeader, ModalTitle, ModalCloseButton,
} from '#/shared/components/Modal';
import { useSelector, useDispatch } from 'react-redux';
import { Button } from '#/shared/components/Button';
import { createCustomer, toggleCustomerModal } from '../../../redux/actions/customer/customerActions';
import CreateCustomerForm from './CreateCustomerForm';
const CreateCustomer = () => {
const { toggleModal } = useSelector(state => state.customer);
const dispatch = useDispatch();
const [modal, setModal] = useState(toggleModal);
const [error, setError] = useState([]);
useEffect(() => {
setModal(toggleModal);
}, [toggleModal]);
const toggle = () => {
dispatch(toggleCustomerModal());
};
const handleSubmit = ({
customerName,
address,
city,
state,
zip,
phone,
primaryContactName,
primaryContactEmail,
customerKey,
}) => {
setError([]);
dispatch(createCustomer(
customerName,
address,
city,
state,
zip,
phone,
primaryContactName,
primaryContactEmail,
customerKey,
setError,
toggle,
));
if (error?.length > 0) {
let serverErr = {};
error?.forEach((err) => {
serverErr = {
...serverErr,
[err?.loc[1]]: err?.msg,
};
});
return serverErr;
}
return false;
};
return (
<div>
<Button variant="primary" onClick={toggle}>Create Customer</Button>
<StyledModal
show={modal}
onHide={toggle}
color="primary"
>
<ModalHeader className="mb-1">
<ModalCloseButton
className="lnr lnr-cross"
aria-label="close-btn"
type="button"
onClick={toggle}
/>
<ModalTitle>Create Customer</ModalTitle>
</ModalHeader>
<CreateCustomerForm onSubmit={handleSubmit} toggle={toggle} setError={setError} />
</StyledModal>
</div>
);
};
export default CreateCustomer;
CustomerPage.jsx (customer/index.jsx)
import React, { useEffect, useState } from 'react';
import {
StyledModal, ModalHeader, ModalTitle, ModalCloseButton,
} from '#/shared/components/Modal';
import { useSelector, useDispatch } from 'react-redux';
import { Button } from '#/shared/components/Button';
import { createCustomer, toggleCustomerModal } from '../../../redux/actions/customer/customerActions';
import CreateCustomerForm from './CreateCustomerForm';
const CreateCustomer = () => {
const { toggleModal } = useSelector(state => state.customer);
const dispatch = useDispatch();
const [modal, setModal] = useState(toggleModal);
const [error, setError] = useState([]);
useEffect(() => {
setModal(toggleModal);
}, [toggleModal]);
const toggle = () => {
dispatch(toggleCustomerModal());
};
const handleSubmit = ({
customerName,
address,
city,
state,
zip,
phone,
primaryContactName,
primaryContactEmail,
customerKey,
}) => {
setError([]);
dispatch(createCustomer(
customerName,
address,
city,
state,
zip,
phone,
primaryContactName,
primaryContactEmail,
customerKey,
setError,
toggle,
));
if (error?.length > 0) {
let serverErr = {};
error?.forEach((err) => {
serverErr = {
...serverErr,
[err?.loc[1]]: err?.msg,
};
});
return serverErr;
}
return false;
};
return (
<div>
<Button variant="primary" onClick={toggle}>Create Customer</Button>
<StyledModal
show={modal}
onHide={toggle}
color="primary"
>
<ModalHeader className="mb-1">
<ModalCloseButton
className="lnr lnr-cross"
aria-label="close-btn"
type="button"
onClick={toggle}
/>
<ModalTitle>Create Customer</ModalTitle>
</ModalHeader>
<CreateCustomerForm onSubmit={handleSubmit} toggle={toggle} setError={setError} />
</StyledModal>
</div>
);
};
export default CreateCustomer;
package.json
{
"name": "stnportal",
"version": "2.5.0",
"private": true,
"scripts": {
"git-info": "node src/gitInfo.js",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"lint:css": "stylelint './src/**/*.js'",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject"
},
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#material-ui/lab": "^4.0.0-alpha.61",
"#mdi/js": "^7.0.96",
"#mdi/react": "^1.6.1",
"#tanstack/react-query": "^4.22.0",
"#tanstack/react-query-devtools": "^4.22.0",
"axios": "^0.21.4",
"bootstrap": "^5.1.1",
"clsx": "^1.2.1",
"customize-cra": "^1.0.0",
"dotenv": "^16.0.1",
"draft-js": "^0.11.7",
"draftjs-to-html": "^0.9.1",
"final-form": "^4.20.2",
"mdi-react": "^7.4.0",
"moment": "^2.29.4",
"polished": "^4.2.2",
"prop-types": "^15.7.2",
"rc-notification": "^4.5.4",
"rc-time-picker": "^3.7.3",
"react": "^17.0.1",
"react-avatar-editor": "^13.0.0",
"react-beautiful-dnd": "^13.1.0",
"react-big-calendar": "^0.35.0",
"react-bootstrap": "^2.2.1",
"react-datepicker": "^3.7.0",
"react-device-detect": "^1.15.0",
"react-dnd": "^16.0.1",
"react-dnd-html5-backend": "^16.0.1",
"react-dom": "^17.0.1",
"react-draft-wysiwyg": "^1.14.7",
"react-dropzone": "^11.2.4",
"react-final-form": "^6.5.3",
"react-final-form-arrays": "^3.1.4",
"react-folder-tree": "^5.0.3",
"react-highlight-words": "^0.18.0",
"react-hook-form": "^7.9.0",
"react-html-parser": "^2.0.2",
"react-i18next": "^11.8.4",
"react-icons": "^4.4.0",
"react-qr-code": "^2.0.7",
"react-redux": "^8.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.1",
"react-select": "^5.4.0",
"react-smooth-scrollbar": "^8.0.6",
"react-table": "^7.6.3",
"react-text-mask": "^5.4.3",
"react-toastify": "^8.2.0",
"recharts": "^2.1.2",
"redux": "^4.0.5",
"redux-actions": "^2.6.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.3.0",
"smooth-scrollbar": "^8.5.3",
"styled-components": "^5.3.5",
"styled-theming": "^2.2.0"
},
"resolutions": {
"styled-components": "^5",
"#mui/styled-engine": "npm:#mui/styled-engine-sc#latest",
"react-error-overlay": "6.0.9"
},
"devDependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-import-resolver-node": "^0.3.4",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-react-hooks": "^5.0.0-next-d1bb1c586-20220922",
"react-app-rewired": "^2.1.8",
"react-error-overlay": "6.0.9",
"vitest": "^0.25.2"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}