Formik not showing error message when i click on submit. Only then

I use YUP as a validation schema for my Formik form. The validation of the Yup Object works perfectly fine (for instance when I click in the field and leave it empty or when I give the first name to many letters. It always shows the error message). BUT when I click on the submit button leaving everything empty no error message is shown. What is wrong here? I have also looked in other posts, but found THIS problem nowhere. The following is my form’s code:

.....
  return (
      <Formik
        enableReinitialize={true}
        initialValues={
        initialValues 
        }
       validationSchema={validationSchema}
        onSubmit={onSubmit}
        >
        {formik => {
                                  
         return (
          <Form
           name="checkout_address"
           id="checkout_address"
className="cham-form"
         >
    

        {mode === "register" && 
        <>
       <h3>{translations['custom.shippingDetail.header']} </h3>
                                         
     {renderFormHeadline()}
        </>
      }

   <h4>{translations['custom.shippingDetail.text']} </h4>
   <div className="container-fluid versandinformationen">
  <div className="row">
       <div className="col-12 col-md-6">                                         
        <SalutationField
          formik={formik}
          translations={translations}
          salutations={salutations}
          state={initialValues}
          changeHandler={e => {
         formik.handleChange(e)                                     
         formik.setFieldValue(
        'salutation',                                                          
        handleSalutations(e.currentTarget.value,salutations)
       )}
       }
     />                                                        
                                               
   </div>
   <div className="col-12 col-md-6">
    <label htmlFor="title">{translations['account.personalTitleLabel']}</label>
<div className="select__input select_input--secondary">
<Field 
as="select"
name="title"
className="cham-form"
placeholder="Titel"
>
                                                      
<option value="">{translations['custom.select.text']}</option>
{titles && titles.map((title)=><option value={title} key={uuidv4()}> {title}</option>)}

</Field>
</div>
</div>
<div className="col-12 col-md-6">
<label htmlFor="firstname">{translations['account.personalFirstNameLabel']}
</label>
<Field 
name="firstname"
className="cham-form"
type="text"
placeholder="Maxi"
 />
<ErrorMessage          
name="firstname"
component="div" 
className="error"
/>
</div>
<div className="col-12 col-md-6">
<label htmlFor="lastname">{translations['account.personalLastNameLabel']}</label>
<Field
 name="lastname"
 className="cham-form"
type="text"
 placeholder="Muster"
 />

 <ErrorMessage
   name="lastname"
   component="div"
   className="error"
  />
  </div>
  </div>
  </div>
                                                                                
  <button type="submit">Submit now</button>

                                                                       
</Form>
 )
  }}
  </Formik>
                                    

   )
 }
.....

My Yup Validation Schema is the following:

Yup.object({
            salutationId: Yup.string().required(translations['custom.formik.anrede']),
            firstname: Yup.string()
                .matches(nameRegExp,"Bitte geben Sie Ihren Vornamen ein")
                .max(20, translations['custom.formik.anrede.max'])
                .required(translations['custom.formik.mandatory']),
            lastname: Yup.string()
                .matches(nameRegExp,"Bitte geben Sie Ihren Nachnamen ein")
                .max(20, translations['custom.formik.nachname'])
                .required(translations['custom.formik.mandatory'])
        })

Many thanks in advance