ReactJS returns promise pending

Question

My server code is this following.

router.get('/', (req, res) =>{
        
    const location = require('mongoose').model('listenerslocation');
    location.find({},'location').limit(10).exec(function(err,result) {
        if(err){
            res.send(err)
        }
        console.log(result)
       // string = "eqfeed_callback('features':["+result+"])";
        res.json(result);
        
    });

});

It gets requested from my reactjs app.

 async componentDidMount(){
    const url = "http://localhost:3010/api";
    const response = await fetch(url);
    const data = response.json();
    this.setState({heat: data})
    console.log(data); 
  }

However all I get is promise - pending when I click on it I see all the data though.

The problem is that it won't go any further (the state is not updating and won't load the page).

Page.js

import React, { Component } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

const containerStyle = {
  width: '400px',
  height: '400px'
};

const center = {
  lat: -3.745,
  lng: -38.523
};

export default class Heatmap extends Component {
  state = {
    loading: true,
    heat: null,
  }

  async componentDidMount(){
    const url = "http://localhost:3010/api";
    const response = await fetch(url);
    const data = response.json();
    this.setState({heat: data})
    console.log(data); 
  }

  render() {
    return (
      <div>
        {this.state.loading || !this.state.heat ? (<div>Loading...</div>) : (<LoadScript
        googleMapsApiKey="AIzaSyB65TiJzvcRXQ0XyDt_0B8IyX2CqYLEnQI"
      >
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center}
          zoom={10}
        >
          { /* Child components, such as markers, info windows, etc. */ }
          <></>
        </GoogleMap>
      </LoadScript>)}
        </div>

      
    )
  }
}