(create-react-app) Extra small box in InfoWindow of Google Map API

Question

I am trying to create an InfoWindow with Google Map API, but there is always an extra small box with the same class to the big InfoWindow. Any way I can get rid of the small InfoWindow? Here's the link of the image showing the extra small box

Here's my code. Full code here: https://gist.github.com/juifuhung/c2ca99cfbb20bf53686b8bc57d8a8524

  return (
    <div style={{ display: "flex" }}>
      {console.log(array)}
      <GoogleMap
        zoom={12}
        center={center}
        mapContainerClassName="map-container"
      >
        {array.map((location) => (
          <Marker
            key={uuidv4()}
            icon={location.icon}
            position={{ lat: location.lat, lng: location.lng }}
            onClick={() => {
              setSelected(location);
            }}
          />
        ))}

        {selected && (
          <InfoWindow
            position={{ lat: selected.lat, lng: selected.lng }}
            onCloseClick={() => setSelected(null)}
          >
            <div>
              <h1>{selected.title}</h1>
              <p>{selected.description}</p>
              <FaHeart />
              <img src={selected.image} alt="" />
            </div>
          </InfoWindow>
        )}
      </GoogleMap>
      <p>map</p>
    </div>
  );
};

Answer 1

Try setting the size for your info window, or there might be a bool to set the small info box into hidden

<InfoWindow
      this.state.isOpen &&

                <InfoWindow onCloseClick={() => this.setState({isOpen: 
          false})}>

        position={{ lat: selected.lat, lng: selected.lng }}
        onCloseClick={() => setSelected(null)}
      >
        <div>
          <h1>{selected.title}</h1>
          <p>{selected.description}</p>
          <FaHeart />
          <img src={selected.image} alt="" />
        </div>
      </InfoWindow>

But if this is an old api, please update to the latest one

@react-google-maps/api