Flickity cell selector in React

Question

Basically I have a dropdown in which each option has an attribute corresponding to the ID of an image. My goal is to go to that image when an option is chosen. For that I am trying to use:

  const myCustomNext = () => {
    flkty.selectCell(somevar)
 };

somevar is initially set to #someid, when I click my button, it goes to the cell with that ID perfectly.

The issue starts once I update the value of somevar. As soon as I do and then click the button, I get the following Error: "Cannot read property 'selectCell' of null"

I logged both the initital somevar and the updated one. Other than the ID itself, they are absolutely identical so I have no clue where I am going wrong. I tried switchen the static and reloadOnUpdate settings but that didn't help.

Here a more complete example that might show better what I am trying to do:

const FlickTest = () => {

    const [varimg, setVarimg] = useState("#cG9zdDoxNA");
    let flkty = null;

    function setVariant(e) {
        let index = e.target.selectedIndex;
        let optionElement = e.target.childNodes[index]
        let option = optionElement.getAttribute('data-imgid');
        setVarimg(`#${option}`);

    }

    const myCustomNext = () => {
        flkty.selectCell(varimg)
    };

    return (
        <>
            <button onClick={myCustomNext}>My custom next button</button>

            <select onChange={setVariant}>
                {variants.map((variant) =>
                    <option data-imgid={variant.gallerie[0].id} value={variant.farbe} key={variant.farbe}>{variant.farbe}</option>
                )}
            </select>

            <Flickity
                flickityRef={c => (flkty = c)}
                className={'carousel'}
                elementType={'div'}
                options={flickityOptions}
                disableImagesLoaded={true}
                reloadOnUpdate={true}
                static={true}
            >
                {variants.map((galitem) =>
                    galitem.gallerie.map((galimg) =>
                        <div key={galimg.id} id={galimg.id.replace(/[^\w\s]/gi, '')}>
                            <span>{galimg.id}</span>
                            <Image fluid={galimg.localFile.childImageSharp.fluid} />
                        </div>
                    )
                )}
            </Flickity>
        </>
    )
}

Any ideas or pointers would be much appreciated :)

Answer 1

Switched from a dropdown to buttons just to simplify the whole thing and see where it goes wrong. Seems like flickity only accepts the value directly but not from state or any other variable.

This works:

 const selectSlide = (e) => {
  flkty.selectCell( `.${e.target.getAttribute("data-selector")}` )
};

...

<button onClick={selectSlide} data-selector={variant.gallerie[0].id} key={variant.farbe}>{variant.farbe}</button>

If anybody knows if this is a flickity thing or (more likely) I was doing something completely wrong I'd still appreciate some pointers so I know better next time :)