Cannot pass state parameter to mutation

I read the documentation about it, but there are still some problems Apollo graphql clientwith combining Apolloand react.

Consider, we have a simple form with 4 fields with a submit button. After pressing submit, the value in the field will be saved to this.state.data( again confirming that it was saved correctly).

On the backend, I have a mutationlike: userCreate(input: UserInput): Userit explicitly accepts this field input.

The issue is:

How to properly perform mutating bound values ​​from this.state.datafields ?

I have the following code so far:

onChange = e =>
    this.setState({
      data: { ...this.state.data, [e.target.id]: e.target.value }
    });

  handleSubmit = async () => {
    writeToLog(this.state.data)
    const { name, email, externalId, userCode} = this.state.data
    this.props.userCreateQuery({
      input: {
        name,
        email,
        externalId,
        userCode
      }
    })
  }

Here's what the mutation looks like:

const QUERY_PERSON_MUTATION = gql`
mutation userCreateQuery($name: String!, $email: String!, $externalId: String!, $userCode: String!) {
  userCreate(input: {
    Name: $name,
    Email: $email,
    ExternalId: $externalId,
    UserCode: $userCode}) {
    Name
    Email
    ExternalId
    UserCode
  }
}`;

Component packaging:

const NewUserFormWithData = graphql(QUERY_PERSON_MUTATION, { name: 'userCreateQuery' })(NewUserForm);

    export default withApollo(NewUserFormWithData)

Update 1:

Architecture:

const typeDefs = `
type User {
   UserId: Int
   /* other fields */
}

input UserInput {
   UserId: Int
   UserCode: String
   /* other fields */
}

type Mutation {
   userCreate(input: UserInput): User
   userUpdate(userId: Int, input: UserInput): User    
}`;