Pude hacer que Flickity funcionara como se esperaba. Pero por alguna razón, cuando llegué a donde se obtienen las fuentes de imágenes de una base de datos externa, las imágenes dejaron de cargarse correctamente y rompieron el flickity.

 render() { const image_urls = this.state.image_urls.map(url => url) // These images urls were fetched using axios. return( <div className="featured-work" id="featured_work"> <div className="title"><div className="text">FEATURED WORK</div></div> <div className="main-carousel" data-flickity='{ "wrapAround": true, "imagesLoaded": true, "groupCells": 1, "autoPlay": 7000 }'> { image_urls.map(url => { return <div style={{backgroundImage: `url(${url})`, backgroundColor: 'orange', backgroundSize: 'contain', backgroundRepeat: 'no-repeat', height: '400px', width: '599px', marginLeft: '48px'}} /> }) } </div> <div className="button-container"> <form action={this.state.behance_link} target="_blank" rel="noopener noreferrer"> <button className="button button--pan"><span>VIEW FULL PORTFOLIO</span></button> </form> </div> </div> ) }

Así es como se ve la llamada a la API para obtener las URL/fuentes de las imágenes:

 const google_sheet_id = "1dezRYzkCZ8VrfsbO2EKVoF9D_hIHsKAF_BuI7b83phA"; const selection_1 = "G5"; const selection_2 = "G21"; axios.get(`https://tofufx-backend.herokuapp.com/google_sheets/${selection_1}/${selection_2}/${google_sheet_id}?api_key=${process.env.REACT_APP_TOFU_BACKEND_API_KEY}`) .then(response => { const image_urls_unfiltered = response.data.values.map(row => { return row[0] }) const image_urls = image_urls_unfiltered.filter(url => { return (typeof url === 'string'); }) this.setState({image_urls}); })

Traté de reemplazar las imágenes como divs con fondos que no solucionaron el problema.