Form.js

const UserSchema = Yup.object().shape({
  email: Yup.string()
    .email("Invalid email address")
    .required("You must enter an email address"),
  url: Yup.string()
    .min(2, "Must be longer than 2 characters")
    .required("You must enter a domain"),
  password: Yup.string().required("You must enter a password"),
  passwordConfirmation: Yup.string()
    .oneOf([Yup.ref("password")], "Passwords don't match!")
    .required("Please re-enter your password")
});

const SignupForm = props => (
  <Mutation mutation={SIGNUP_MUTATION}>
    {(signup, { error, loading }) => (
      <>
        <Formik
          initialValues={{
            email: "",
            url: "",
            password: "",
            passwordConfirmation: ""
          }}
          validationSchema={UserSchema}
          onSubmit={async (e, values) => {
            e.preventDefault();
            signup({
              variables: {
                email: values.email,
                url: values.url
              }
            });
          }}
          render={({
            values,
            errors,
            touched,
            handleChange,
            handleBlur,
            handleSubmit
          }) => (
            <Form onSubmit={handleSubmit}>
              <fieldset disabled={loading} aria-busy={loading}>
                <div error={error} />
                <Box>
                  <Box mb="20px">
                    <label htmlFor="email">
                      <Text my={2}>Email</Text>
                      <StyledInput
                        placeholder="Enter your email address"
                        type="email"
                        name="email"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.email}
                      />
                    </label>

                    {touched.email && errors && errors.email && (
                      <Text fontSize={1} color="red" pt={1}>
                        {errors.email}
                      </Text>
                    )}
                  </Box>

                  <Box mb="20px">
                    <label htmlFor="url">
                      <Text mb="10px">Domain URL</Text>
                      <StyledInput
                        placeholder="Enter your domain name url"
                        type="text"
                        name="url"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.url}
                      />
                    </label>

                    {touched.url && errors && errors.url && (
                      <Text fontSize={1} color="red" pt={1}>
                        {errors.url}
                      </Text>
                    )}
                  </Box>

                  <Box mb="20px">
                    <label htmlFor="password">
                      <Text my="10px">Password</Text>
                      <StyledInput
                        placeholder="Enter a secure password"
                        type="password"
                        name="password"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.password}
                      />
                    </label>

                    {touched.password && errors && errors.password && (
                      <Text fontSize={1} color="red" pt={1}>
                        {errors.password}
                      </Text>
                    )}
                  </Box>

                  <Box mb="20px">
                    <label htmlFor="passwordConfirmation">
                      <Text my="10px">Confirm Password</Text>
                      <StyledInput
                        placeholder="Re-enter your password"
                        type="password"
                        name="passwordConfirmation"
                        onChange={handleChange}
                        onBlur={handleBlur}
                        value={values.passwordConfirmation}
                      />
                    </label>

                    {touched.passwordConfirmation &&
                      errors &&
                      errors.passwordConfirmation && (
                        <Text fontSize={1} color="red" pt={1}>
                          {errors.passwordConfirmation}
                        </Text>
                      )}
                  </Box>

                  <Box>
                    <Button type="submit" width={1} primary>
                      Sign up
                    </Button>
                  </Box>
                </Box>
              </fieldset>
            </Form>
          )}
        />
      </>
    )}
  </Mutation>
);