Hello, hope you will help That's my code for growthbook, but as a result it all the time shows calendly button I have feature and experiment which have the same names. Please tell me what is wrong ?

// AB TEST CALENDLY vs WHATSAPP
const abTestElem = document.querySelector('#ab__test');
const whatsapp = "<div class='whatsapp__btn'><a href='***********' target='_blank' rel='nofollow'><img src='/img/WhatsAppButtonGreenSmall.svg' alt='whatsapp'></a></div>"
const calendly = "<div class='calendly__btn'><a href='*************' target='_blank' rel='nofollow'> <img src='/img/calendly.svg' alt='calendly'></a></div>"

document.addEventListener("DOMContentLoaded", async () => {
    const gb = new window.growthbook.GrowthBook({
        apiHost: "<https://cdn.growthbook.io>",
        clientKey: "************",
        enableDevMode: false,
        trackingCallback: (experiment, result) => {
            // Example using Segment
            analytics.track("Experiment Viewed", {
                experimentId: experiment.key,
                variationId: result.key,
            });
        },
        onFeatureUsage: (featureKey, result) => {
            console.log("feature", featureKey, "has value", result.value);
        },
    });

    await gb.loadFeatures({
        autoRefresh: true,
        timeout: 2000,
    });

    const result = gb.run({
        key: "cta_btn_variants",
        variations: ["calendly", "whatsapp"],
        coverage: 1,
        weights: [0.5, 0.5],
    });

    if (result.value === 'whatsapp') {
        abTestElem.innerHTML = whatsapp
        gtag('event', 'cta_click', {
            'event_label': 'whatsapp',
            'value': 100
        });

    } else if (result.value === 'calendly') {
        abTestElem.innerHTML = calendly
        gtag('event', 'cta_click', {
            'event_label': 'calendly',
            'value': 100
        });
    }
});