Reactjs – Formik validation is not showing after the modification

I’m new to formik. i searched couple of times and didn’t find a working solution.
so i need your help to resolve this issue.

my formik form as below,

          <Form>
            <div>
              <div>
                <div>
                  <Field
                    type="text"
                    id="firstName"
                    name="firstName"
                    className="form-control"
                    placeholder="First Name"
                    validate={ValidateName}
                  />
                  <ErrorMessage name="firstName">
                    {msg => <div style={errorMsg}>{msg}</div>}
                  </ErrorMessage>
                </div>
              </div>

after that i added some modification as below,

const searchParams = new URLSearchParams(document.location.search);

const [firstName, setFirstName] = useState(searchParams.get("firstName") || "");

<div className="col-md-6 col-sm-12">
    <div className="form-group">
         <Field
            type="text"
            id="firstName"
            name="firstName"
            className="form-control"
            placeholder="First Name"
            onChange={(e) => setFirstName(e.target.value)}
            validate={ValidateName}
            value={firstName}
         />

          <ErrorMessage name="firstName">
               {msg => <div style={errorMsg}>{msg}</div>}
          </ErrorMessage>
        </div>
     </div>

all are working fine, but validation message is not showing in the form. ValidateName returning error message

please let me know where i did the mistake. Thanks