Formik tRPC error "Expected string, received null"

I am using Formik in my Nextjs app along with tRPC. When I submit the form, I get the following error:

TRPCClientError: [
  {
    "code": "invalid_type",
    "expected": "string",
    "received": "null",
    "path": [
      "user",
      "handle"
    ],
    "message": "Expected string, received null"
  }
]

Here is my form:

const tenantMutation = trpc.tenant.createTenant.useMutation();
  const CreateTenantSchema = z.object({
    organization: z
      .string()
      .min(3, "Too short!")
      .max(60, "Too long!")
      .regex(organizationRegex, "Only alphanumeric characters are allowed"),
    handle: z
      .string()
      .min(3, "Too short!")
      .max(40, "Too long!")
      .regex(handleRegex, "Only alphanumeric characters are allowed"),
  });
  const formik = useFormik({
    initialValues: {
      organization: "",
      handle: "",
    },
    onSubmit: async (values) => {
      //   if (!user.data) return;
      await tenantMutation.mutateAsync({
        name: values.organization,
        handle: values.handle,
        user: user.data as UserSchema,
      });
    },
    validationSchema: toFormikValidationSchema(CreateTenantSchema),
  });

  return (
    <div className="grid gap-10 grid-cols-1 mt-4 text-center">
      <p className="text-2xl font-medium">Welcome aboard!</p>
      <p className="text-lg font-medium">
        Looks like you need to create or join an organization.
      </p>
      <form onSubmit={formik.handleSubmit} className="space-y-4 mx-auto">
        <VTextfield
          id="organization"
          name="organization"
          type="text"
          onChange={formik.handleChange}
          label={"Organization"}
          placeholder={"My Company"}
          value={formik.values.organization}
          errorMessage={formik.errors.organization}
        />
        <VTextfield
          id="handle"
          name="handle"
          type="text"
          onChange={formik.handleChange}
          label={"Handle"}
          placeholder={"jsmith23"}
          value={formik.values.handle}
          errorMessage={formik.errors.handle}
        />

        <VButton
          text="Create organization"
          type="submit"
          classNames={["w-[290px] mx-auto"]}
          disabled={
            (formik.errors.handle !== undefined &&
              formik.errors.handle.length > 0) ||
            (formik.errors.organization !== undefined &&
              formik.errors.organization.length > 0)
          }
        />
      </form>
    </div>
  );
};

When I console.log the input values I get the correct values and types. I am unable to figure out why this is happening. Any ideas?

>Solution :

The error message you are seeing suggests that the ‘handle’ field in the ‘user’ object is expected to be a string, but instead it is ‘null’. In the code you provided, the ‘user’ object seems to be coming from the ‘user.data’ property, which is cast as ‘UserSchema’.

One possibility is that the ‘user.data’ property is not defined or is ‘null’, and as a result, the handle property is not being set properly in the ‘tenantMutation.mutateAsync’ call.

To debug this issue, you can try logging the value of ‘user.data’ and ‘values.handle’ in the ‘onSubmit’ function, just before the ‘tenantMutation.mutateAsync’ call. This will help you determine if the ‘user.data’ property is being set properly, and if the ‘handle’ value is being passed correctly.

Another possibility is that there is a bug in the ‘tenantMutation.mutateAsync’ function, which is causing the ‘handle’ property to be set to ‘null’ before it is sent to the server. You may want to check the implementation of this function to see if there are any issues.

Lastly, it’s possible that there is an issue with the server-side validation of the request, which is causing the error to be returned. You may want to check the server logs or contact the API support team to see if they can provide more information about the error.