Beginners questions about Marker

[echo292]

Hi,
I'm using the latest version of react-map-gl 7.17. I have a Marker draw issue when using a valid json source.
I'm able to manually hard code and the pins show up on the map with no problem.
Then when trying to populate the map from a response json source, no markers are populating. I confirmed the incoming data looks correct and has latitude and longitude values.. I'm not getting any console errors to help me troubleshoot why the markers are not drawing. I provided the code below to see if anyone had any suggestions or comments. Thank you!

const MapViewer = ({ mapData }) => {

  const [viewport, setViewport] = useState({
    latitude: 39.157070,
    longitude: -101.774597,
    zoom: 4
  });
  console.log('this is the response data: ', mapData)

  ];  
return (
 <div className={styles.map} >
  <ReactMapGL        
  {...viewport} 
  maxZoom={12} 
  mapboxAccessToken={TOKEN_KEY}
  mapStyle="mapbox://styles/mapbox/dark-v11"
  onMove={evt => setViewport(evt.viewState)}>

{mapData && mapData.map((trees) => {
	const parsedLatitude = parseFloat(trees.latitude.trim());
	const parsedLongitude = parseFloat(trees.longitude.trim());  

	if (!isNaN(parsedLatitude) && !isNaN(parsedLongitude)) {
	return (
	  console.log('Tree data : ', trees.id, parsedLatitude, parsedLongitude),
	  <Marker key={trees.id} longitude={parsedLongitude} latitude={parsedLatitude}>
		<div style={{ color: 'red', fontSize: '30px' }}>📍</div>
	  </Marker>
	);
	} else {
	console.warn('Invalid coordinates:', trees.id, trees.latitude, trees.longitude);
	return null;
	}
	})}

  </ReactMapGL>
 </div>
	);};

export default MapViewer;

[echo292]

If I hardcode it in the MapViewer function it works.

const MapViewer = ({ mapData }) => {
  const [viewport, setViewport] = useState({
    latitude: 39.157070,
    longitude: -101.774597,
    zoom: 12
  });


  const test = [
    {
        "id": 1,
        "latitude": "34.436081",
        "longitude": "-112.093810",

    },
    {
        "id": 2,
        "latitude": "34.436081",
        "longitude": "-112.093820",

    },
    {
        "id": 3,
        "latitude": "34.436081",
        "longitude": "-112.093810",

    },
    {
        "id": 4,
        "latitude": "34.436081",
        "longitude": "-112.093811",

    }]



  const renderMarkers = () => {
    return test?.map((marker, index) => {
      const latitude = parseFloat(marker.latitude);
      const longitude = parseFloat(marker.longitude);

      if (!isNaN(latitude) && !isNaN(longitude)) {
        console.log('Valid coordinates:', index, longitude, latitude);
        return (
          <Marker key={index} latitude={latitude} longitude={longitude}>
            <div style={{ color: 'red', fontSize: '24px' }}>📍</div>
          </Marker>
        );
      } else {
        console.warn('Invalid coordinates:', index, marker.latitude, marker.longitude);
        return null;
      }
    });
  };

  useEffect(() => {
    console.log('Map Data:', mapData);
  }, [mapData]);

  return (
    <div className={styles.map}>
      <ReactMapGL
        {...viewport}
        maxZoom={20}
        mapboxAccessToken={TOKEN_KEY}
        mapStyle="mapbox://styles/mapbox/dark-v11"
        onMove={evt => setViewport(evt.viewState)} 
        onViewportChange={setViewport}
      >
        {renderMarkers()}
      </ReactMapGL>
    </div>
  );
};

export default MapViewer;

[echo292]

It also works if I load the same data through a json file.
Just not from a Django rest framework API.
When I run the console.log on both the mapData and data.json, the output is identical. I can't figure out why the mapData will not draw markers.

import data from "../data.json"

const MapViewer = ({ mapData }) => {
  const [viewport, setViewport] = useState({
    latitude: 39.157070,
    longitude: -101.774597,
    zoom: 12
  });

  useEffect(() => {
    console.log('Map Data:', mapData);
  }, [mapData]);

  // Create an array to hold Marker components
  const markers = mapData?.map((marker, index) => {
    const { latitude, longitude } = marker;
    console.log('Valid coordinates:', index, longitude, latitude);
    
    return (
      <Marker key={index} latitude={parseFloat(latitude)} longitude={parseFloat(longitude)}>
        <div style={{ color: 'red', fontSize: '24px' }}>📍</div>
      </Marker>
    );
  });

  return (
    <div className={styles.map}>
      <ReactMapGL
        {...viewport}
        width="800px"
        height="600px"
        mapboxAccessToken={TOKEN_KEY}
        mapStyle="mapbox://styles/mapbox/dark-v11"
        onMove={evt => setViewport(evt.viewState)} 
        onViewportChange={setViewport}
      >
        {markers}
      </ReactMapGL>
    </div>
  );
};

export default MapViewer;