Проверка, увеличивается ли массив

Question

Я получаю каждые 10 секунд данные из API. Это массив, содержащий геокоординаты. Но теперь я хочу проверить, увеличивается ли массив каждые 10 секунд или нет. Я думаю, что я хочу получить результат в логическом. Я также думаю, что должен поместить это в setInterval, но действительно не знаю как. Есть ли способ исправить это?

import React from 'react';
import { 
  GoogleMap, 
  withScriptjs, 
  withGoogleMap, 
  Marker,
  Polyline} 
from 'react-google-maps';
import '../App.css';
import { Link } from "react-router-dom"; 
import Test4 from "./Test4";


class Map extends React.Component {
state = {
  loading: true,
  coordinates: null,
  time: null
  
}

fetchData = async() => {
  const url = "https://ttr.vsbbn.nl:4000/gps_history?team_id=7";
  const response = await fetch(url);
  const data = await response.json();
  this.setState({coordinates: data, loading: false });
}

async componentDidMount(){
  await this.fetchData();

  setInterval( () =>{
    this.fetchData();
    
    console.log('fetching');
    // const url = "https://ttr.vsbbn.nl:4000/gps_history?team_id=5";
    // const response = await fetch(url);
    // const data = await response.json();
    // this.setState({coordinates: data, loading: false });
  }, 1000 * 10 )

}

  render = () => {
    // console.log(this.state.coordinates);
    const { loading, coordinates, time} = this.state;
    if(loading == false){

      let fetchCoordinates = coordinates.map(coordinate => {
        const single_coord = {lat: parseFloat(coordinate.lat), lng: parseFloat(coordinate.lon)}
          return single_coord;
      }) 

        // console.log(fetchCoordinates);
        // console.log(this.path);
        //var a = Number(test[0].lat);
        
      return(
        <>
          <GoogleMap
            defaultZoom={14}
            //defaultCenter={{ lat: 51.917372, lng: 4.485093 }}
            defaultCenter={{ lat: fetchCoordinates[0].lat , lng: fetchCoordinates[0].lng }}

          >
            <Polyline path={fetchCoordinates} options={{ strokeColor: "#FF0000 " }} />
            <Marker position={fetchCoordinates[fetchCoordinates.length - 1]} />
            
        </GoogleMap>
        
        </>
      )
    }else{
      return(<div>Neem contact op met de developers. Server staat namelijk uit!</div>)
    }
    // return (
    //   <>
    //   {!loading || coordinates ? (
        
    //       <GoogleMap
    //         defaultZoom={16}
    //         defaultCenter={{ lat: 51.916184, lng: 4.487743 }}
    //         >
    //           <Polyline path={this.test} options={{ strokeColor: "#FF0000 " }} />
    //           <Marker position={this.test[this.test.length - 1]} />
              
    //       </GoogleMap>
        
    //   ): (
    //     <>
    //     loading 
    //     </>
    //   )}
    //   </>
    // )
  }
}

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default() => (  
  <div>
    <br/>
    <b>Klik <Link to="/home" className="btn btn-primary">hier</Link> om terug te gaan naar teamoverzicht</b>
    <br/>
    <br/>
    <h3>Live kaart</h3>
    <p>
      Teamnaam: Hogeschool Rotterdam 3 (LIVE)<br/>
      Live:<span class="dot2"></span><br/>
      Actuele snelheid: 0 km per uur <br/>
      Gemiddelde snelheid: 0.05  km per uur <br/>
      Verwachte aankomsttijd Rotterdam: Onbekend <br/>
      <div></div>
    </p>  

    <div style={{width: '50vw', height: '50vh'}}> 
      <WrappedMap googleMapURL = {'https://maps.googleapis.com/maps/api/js?key=AIzaSyB9w0T_VMezCy1AaqxXpRie9ChrbVCt1O4&v=3.exp&libraries=geometry,drawing,places'}
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `100%` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  </div>
  )