Apollo Graphql query in React with input values

I'm having trouble to make a query in React with Apollo. I know how to do it in the playground and basic queries in React but I can't figure out how to pass dynamically the values for an input inside the query. The query should be like this. This works on playground.

getCityByName(name: "London", country: "GB", config:{units:metric, lang: sp}) {
  id
  name
  weather {
    summary {
      description
    }
    temperature {
      actual
    }
  }
}

The units and lang are enum. In React I could only pass the name and country dinamically but not the config options, I only get errors and I've tried so many different syntax. The only way I can is hardcoding like this:

  const GET_DATA = gql`
    query getCity($name: String!, $country: String) {
      getCityByName(
        name: $name
        country: $country
        config: { units: metric, lang: sp }
      ) {
        id
        name
        country
        weather {
          summary {
            description
          }
          temperature {
            actual
          }
        }
      }
    }
  `;

  const { loading, data, error } = useQuery(GET_DATA, {
    variables: {
      name: 'London',
      country: 'GB',
    },
  });

How can I make units and lang dynamic?