GQL/Apollo Error not always being caught in react error handling

Question

I have built dialog in react asking the user to confirm before saving, then sends a request via GQL, with error handling. This works very well except for one error I am experiencing that is not running the 'catch' block. The code will run and the dialog will close, and even though the request fails, it appears to be successful. The error I'm experiencing is ApolloError: Response not successful: Received status code 422 due to an unexpected field. This is not an issue in the case of a missing field, server error, or anything else yet. Why might the try/catch block not be working properly?

        <SubmitButton
          loadingContent="Saving"
          onClick={async () => {
            try {
              await onSave();
              setRecentlySaved(true);
              setDialog();
            } 
            catch (error: any) { // <--- this block is not always running 
              if (error.networkError) {
                setErrorMessage(`[Network error]: ${error.networkError}`);
              }
              else if (error.graphQLErrors) {
                error.graphQLErrors.map(({ message, locations, path }: GQLErrors) =>
                  setErrorMessage(
                    `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
                  ),
                );
              } else {
                setErrorMessage(`[Error]: ${error}`);
              }
            }
          }}>
          Save
        </SubmitButton>