Why map is not display in react js?

Question

I try for get markers location from Api. I so use useEffect but if I don't using render() map don't show

this code shows the markers but the map is not display and throw some errors by react . How can I fix it?

maps.js

import React, { useEffect, useState } from "react";
import GoogleMapReact from 'google-map-react';
import { render } from "@testing-library/react";

const markerStyle = {
  position: "absolute",
  top: "100%",
  left: "50%",
  transform: "translate(-50%, -100%)"
};

function SimpleMap() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const items = [];
  const [buses, setBuses] = useState([]);

  useEffect(() => {
    fetch("https://www.example.com/api/ajax/apiNew")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          //setItems(result);
          items.push(result);
          setBuses(items[0]["bus"]);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  }
  else if (!isLoaded) {
    return <div>Loading...</div>;
  }
  else {
    return (
      <div style={{ height: "100vh", width: "100%" }}>
        <GoogleMapReact
          bootstrapURLKeys={{
            key: "My_API_KEY"
          }} defaultCenter={{
            lat: 60.192059,
            lng: 24.945831
          }}
        >
          <div>
            {
              items.map(item => (
                <div to={"/" + item['@attr'].code} key={item['@attr'].id} lat={item['@attr'].lat} lng={item['@attr'].long}>
                  <img style={markerStyle} src="http://icon-library.com/icon/pin-icon-png-12.html" alt="pin" />
                </div>
              ))
            }
          </div>
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

and execute this code . map don't show . and markers image don't upload

Answer 1

{items.map((item) => {
  return (
    <div>
      ...your code
    </div>
  )
}}