I was able to get Flickity working as expected. But for some reason when I made it to where the image sources are fetched from an external database, the images stopped loading properly and broke 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>
    )
  }

This is what the API call looks like for fetching the images urls/sources:

    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});

    })

I tried to replace the images as divs with backgrounds which didn't fix the problem