Cache different variations of page with same url

Hi!
My worker based on a user agent and some cookies detects a variation (say A, B, or C) and then makes a request to the origin server passing a variation as a custom header using fetch. Server, based on that custom header returns different responses.

Can I cache those responses based on that custom header?
or can I do it using a custom cache key?

async function handleRequest(request) {
    const url = new URL("urltomybackendservice");
    const variation = "A";
    const someCustomKey = `${url}#{variation}`
    let response = await fetch(url, {
         cf: {
             cacheKey: someCustomKey,
         },
    })
    response = new Response(response.body, response)
    return response
}

addEventListener('fetch', event => {
    return event.respondWith(handleRequest(event.request))
})

Or the only option is to use Cache API with a key {url}#{variation}?
Thanks in advance!