CheckoutLineItemsAdd Returns Null Checkout Value

I am trying to perform the following Storefront API request through the GraphQL Explorer. However, the response I get for checkout is null.

Storefront API Response:

{
  "data": {
    "checkoutLineItemsAdd": {
      "checkout": null
    }
  }
}

Storefront API Mutation:

mutation checkoutLineItemsAdd($checkoutId: ID!, $lineItems: [CheckoutLineItemInput!]!) {
  checkoutLineItemsAdd(checkoutId: $checkoutId, lineItems: $lineItems) {
    checkout {
      id
    }
  }
}

Input Variables:

{
  "checkoutId": "gid://shopify/Checkout/<checkout-token>?key=<checkout-key>",
  "lineItems": {
    "quantity": 1,
    "variantId": "gid://shopify/ProductVariant/<variant-id>"
  }
}

Where:

, , and are strings obtained through checkout.liquid…

var variantId = "{{ variant.id }}"
var checkoutToken = window.Shopify.Checkout.token
var checkoutKey = window.Shopify.Checkout.cartToken

I have also tried to provide the IDs in base64 format, however, the result also returns a null value. Base64 encoding obtained as follows:

var checkoutId = btoa("gid://shopify/Checkout/" + checkoutToken + "?" + "key=" + checkoutKey)
var variantId = btoa("gid://shopify/ProductVariants/" + variantId)

Would deeply appreciate help in understanding the format for the Global IDs and/or why the request returns a null value.

Did you ever find a solution for it? I am having the exact same issue…