Variable \"$picture\" of type \"Upload\" used in position expecting type \"Upload\"

Question

I am working with apollo server and apollo client with React and react-hook-forms. I have set up the backend to accept file uploads following the official guide. On the frontend I added the apollo-upload-client library.

When I try uploading a file I get a Variable \"$picture\" of type \"Upload\" used in position expecting type \"Upload\". response from the server and I do not know how to proceed.

My mutation gql:

mutation Register(
    $password: String!
    $gender: String
    $name: String!
    $token: String!
    $biography: String
    $phone_number: String
    $health_check: Upload
    $picture: Upload
) {
    signUp(
        password: $password
        name: $name
        token: $token
        biography: $biography
        phone_number: $phone_number
        gender: $gender
        health_check: $health_check
        picture: $picture
    ) {
        token
        account {
            role
        }
    }
}

And then code from the registration component (using react-hook-form and graphql-codegen for helping hooks and types):

const Register = () => {
    const [registerMutation, { loading, error, data }] = useRegisterMutation();
    const { handleSubmit, control } = useForm<RegisterMutationVariables>();
    const registerSubmit = handleSubmit((data: RegisterMutationVariables) => {
        registerMutation({
            variables: {
                ...data,
                token: registrationToken as string,
            },
        })
    });

    return (
        <form onSubmit={registerSubmit} >
            ...other fields
            <input {...register('picture')} type="file" />
            <button type="submit" value="Register"/>
        </form>
    );
};