Safari won't execute Recaptcha on validation

Question

I'm having an issue with Google reCaptcha on my registration form. I use Formik library for my registration form and react-recaptcha library for captcha . In Google Chrome I have no issues with this component whatsoever, but on Safari if I navigate directly to /register path reCaptcha is not being executed and it won't work.

While if I navigate to /login page then click on /register, it works.

Here's a snippet preview of my component:

const RegisterForm = () => {
  const siteKey = 'site-key-strinng';
  const [userData, setUserData] = useState({
    password: '',
    email: '',
    recaptcha: '',
  });

  let recaptchaInstance;

  const executeCaptcha = () => {
    recaptchaInstance.execute();
  };

  return (
        <Formik
          initialValues={{
            email: '',
            password: '',
            recaptcha: '',
          }}
          validate={values => {
            executeCaptcha();
            const errors = {};
            if (!values.password) errors.password = 'Password Required';
            if (!values.recaptcha) errors.recaptcha = 'Captcha Required';
            if (!values.email) {
              errors.email = 'Email Required';
            } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
              errors.email = 'Invalid email address';
            }
            return errors;
          }}
          onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
              setSubmitting(false);
              setUserData(values);
              register(values);
            }, 500);
          }}
        >
          {({ submitForm, isSubmitting, setFieldValue }) => (
            <Form>
              <UI.Heading>Register</UI.Heading>
              <UI.FormItem>
                <Field
                  component={TextField}
                  style={{ paddingRight: '5px' }}
                  type="email"
                  label="Email"
                  name="email"
                  variant="outlined"
                  fullWidth
                />
                <Field
                  component={TextField}
                  type="password"
                  label="Password"
                  name="password"
                  variant="outlined"
                  fullWidth
                />
              </UI.FormItem>
              <UI.FormItem>
                <UI.Button
                  variant="contained"
                  color="primary"
                  disabled={isSubmitting}
                  onClick={submitForm}
                >
                  Register
                </UI.Button>
              </UI.FormItem>
              <Recaptcha
                ref={e => {
                  recaptchaInstance = e;
                }}
                sitekey={siteKey}
                size="invisible"
                verifyCallback={response => setFieldValue('recaptcha', response)}
              />
            </Form>
          )}
        </Formik>
  );
};

export default RegisterForm;

Also on Safari, I get a weird warning in the console when loading the page:

The source list for Content Security Policy directive 'script-src' contains an invalid source: 'strict-dynamic'. It will be ignored.

Is this warning related to the fact the reCaptcha won't execute? Is there a way to fix the warning?

Or how can I make my component working on Safari, as well?