How do I get my flow lines to animate on this Origin-Destination map?

Question

I am trying to animate my flow map like the example here: https://teralytics.github.io/flowmap.gl/index.html?path=/story/basic--animated

I have gotten the lines to do everything but move (see screenshot of output). I do not think I am calling the props correctly, but am new to ReactJS so not really sure...code is below

    import React, { Component } from "react";
    import StaticMap, { NavigationControl } from "react-map-gl";
    import { DeckGL } from "deck.gl";
    import FlowMapLayer from "@flowmap.gl/core";
    import geoViewport from "@mapbox/geo-viewport";

    import "./App.css";

    const MAPBOX_TOKEN = process.env.REACT_APP_MapboxAccessToken;

    const getInitialViewState = () => {
  const bbox = [-109.06, 36.99, -102.04, 41.0];
  const {
    center: [longitude, latitude],
    zoom,
  } = geoViewport.viewport(
    bbox,
    [window.innerWidth, window.innerHeight],
    undefined,
    undefined,
    512
  );
  return {
    longitude,
    latitude,
    zoom,
    bearing: 0,
    pitch: 0,
  };
};

const colors = {
  flows: {
    scheme: [
      // Teal scheme from https://carto.com/carto-colors/
      "#d1eeea",
      "#a8dbd9",
      "#85c4c9",
      "#68abb8",
      "#4f90a6",
      "#3b738f",
      "#2a5674",
    ],
  },
  locationAreas: {
    outline: "rgba(92,112,128,0.5)",
    normal: "rgba(187,187,187,0.5)",
    selected: "rgba(217,130,43,0.5)",
  },
};

export default class App extends Component {
  state = {
    locations: null,
    flows: null,
    time: 0,
  };

  componentDidMount() {
    fetch(
      `${process.env.PUBLIC_URL}/data/US_Counties_AND_Centroids_NoPR_5.5.json`
    )
      .then((response) => response.json())
      .then((json) => this.setState({ locations: json }));

    fetch(`${process.env.PUBLIC_URL}/data/CO_Origin_flows.json`)
      .then((response) => response.json())
      .then((json) => this.setState({ flows: json }));
  }

  render() {
    const { locations, flows } = this.state;
    const layers = [];
    if (locations && flows) {
      layers.push(
        new FlowMapLayer({
          colors,
          locations,
          flows,
          getLocationId: (l) => l.properties.GEOID,
          getLocationCentroid: (l) => l.properties.Centroid,
          getFlowOriginId: (f) => f.origin,
          getFlowDestId: (f) => f.dest,
          getFlowMagnitude: (f) => f.count2010,
          getAnimatedFlowLineStaggering: (f) => f.count2010,
          animate: true,
          animationCurrentTime: 1,
          animationTailLength: 0.25,
          showTotals: true,
          pickable: true,
        })
      );
    }

    return (
      <DeckGL
        initialViewState={getInitialViewState()}
        controller={true}
        layers={layers}
      >
        <StaticMap mapboxApiAccessToken={MAPBOX_TOKEN} />
      </DeckGL>
    );
  }
}