prevent values in Fields of redux-from on unsuccessfull api response - reactjs

Question

I want to prevent values in fields of redux-form on unsuccess API response to review user what he has entered wrong but when I submit the form all the values become clear I try destoryonUnmount method in reudForm() but this is not a good approach
import { useDispatch, useSelector } from "react-redux";
import { SubmissionError } from "redux-form";
import Login from "../../components/Login";
function LoginPage() {
const Formdata = async (Formvalues) => {
const responsive = await dispatch(Action.Login(Formvalues));
if (!!responsive.payload.accessToken) {
} else {
throw new SubmissionError({
_error: "Login Failed",
});
}
};
return <Login onSubmit={Formdata} />;
}
export default LoginPage;
here is my form configuration
const validate = (values) => {
const errors = {};
const requiredFields = ["email", "password"];
requiredFields.forEach((field) => {
if (!values[field]) {
errors[field] = "Required";
}
});
return errors;
};
const LoginComponent = reduxForm({
form: "LoginForm",
validate,
forceUnregisterOnUnmount: true,
})(Login);
export default LoginComponent;

Answer 1

I have found the solution by searching it for two to three days because no one answer it
in my routes file, I have to use either React.pureComponent or momo
import React, { Suspense, memo } from "react";
import { Switch, Route } from "react-router-dom";
// Import Containers
import Login from "../container/Login";
const Routes = () => {
return (
<Suspense fallback="Loading......">
<Switch>
<Route exact path="/" component={Authenciated(Login)} />
<Route component={NotFoundPage} />
</Switch>
</Suspense>
);
};
export default memo(Routes);