Maptiler animate() and animateByFactor() Not Doing Anything

Question

I am building a weather radar viewer web app using the Maptiler SDK for JavaScript. The first time that I toggle the map animation with .animateByFactor(), it works fine, but after that it does nothing. I have tried both .animate() and .animateByFactor() but neither one works. No errors were thrown either time.

const Map = () => {
      let mapContainer = useRef(null);
      let map = useRef(null);
      let location = {longitude: this.state.longitude, latitude: this.state.latitude};
      let [zoom] = useState(4);

      let weatherLayer = new maptilerweather.RadarLayer({
        opacity: 0.8,
      });
  
      useEffect(() => {
        if (map.current) return;
        
        map.current = new maptilersdk.Map({
          container: mapContainer.current,
          style: maptilersdk.MapStyle.WINTER,
          center: [location.longitude, location.latitude],
          zoom: zoom
        });

        new maptilersdk.Marker({color: "#29a7ba"})
          .setLngLat([this.state.longitude, this.state.latitude])
          .addTo(map.current);
      
        map.current.on("load", () => {
          if (this.state.status === 'radar-temperature') {
            weatherLayer = new maptilerweather.TemperatureLayer({
              colorramp: maptilerweather.ColorRamp.builtin.TEMPERATURE_3
            });
          } else if (this.state.status === 'radar-wind') {
            weatherLayer = new maptilerweather.WindLayer();
          } else if (this.state.status === 'radar-precipitation') {
            weatherLayer = new maptilerweather.PrecipitationLayer();
          } else if (this.state.status === 'radar-clouds') {
            weatherLayer = new maptilerweather.RadarLayer({
              opacity: 0.8,
              colorramp: maptilerweather.ColorRamp.builtin.RADAR_CLOUD,
            });
          } else if (this.state.status === 'radar-pressure') {
            weatherLayer = new maptilerweather.PressureLayer({
              opacity: 0.8,
            });
          }

          map.current.setPaintProperty("Water", 'fill-color', "rgba(0, 0, 0, 0.4)");
          map.current.addLayer(weatherLayer, 'Water');
        })
      }, [location.longitude, location.latitude, zoom])

      const [playStatus, updatePlayPause] = useState("pause");

      const getPlayPauseIcon = () => {
        if (playStatus === 'play') {
          return <FontAwesomeIcon icon={faPause} />
        } else {
          return <FontAwesomeIcon icon={faPlay} />
        }
      }

      const handlePlayPauseClick = () => {
        if (playStatus === 'play') {
          updatePlayPause("pause");
          weatherLayer.animate(0);
        } else {
          updatePlayPause("play")
          weatherLayer.animateByFactor(3600);
          console.log("RAN");
        }
      }


      return (
        <div className='large-map-wrap'>
          <div id='radar-controls'>
          <div id='radar-controls-top'>
            <div id='radar-play-pause' onClick={handlePlayPauseClick}>{getPlayPauseIcon()}</div>
            <h1>{getCurrentRadarType()}</h1>
          </div>
          <input type="range" min="1" max="100" defaultValue="0" className="slider" id="radar-slider"></input>
          </div>
          <div ref={mapContainer} className='map' />
        </div>
      )
    }