[Bug] Mapbox queryRenderedFeatures() returns empty array

Description

I am following this example here https://docs.mapbox.com/mapbox-gl-js/example/queryrenderedfeatures/ to retrieve the information on point of the map. It uses queryRenderedFeatures() to generate the information of a tile. However, when I added this to my code. it returns an empty array only. May I ask if anyone experiencing the same issue?

Expected Behavior

No response

Steps to Reproduce

Here is my code

import React, { useState, useEffect, useRef } from "react";
import MAP, { MapRef } from "react-map-gl";

const MAPBOX_TOKEN = process.env.REACT_APP_MAPBOX_TOKEN;

export default function MapboxMap(props: User): React.ReactElement {
  const mapRef = useRef<MapRef>(null);
  const [mapStyle, setMapStyle] = useState("mapbox://styles/mapbox/standard");

  const [viewport, setViewport] = useState({
    latitude: 22.3027,
    longitude: 114.1772,
    bearing: 0,
    pitch: 0,
  });
  const getMapPointInfo = (e: mapboxgl.MapMouseEvent) => {
    console.log("Info at this point", e.point);
    const features = mapRef.current?.queryRenderedFeatures(e.point);

    const displayProperties = ["type", "properties", "id", "layer", "source", "sourceLayer", "state"];

    const displayFeatures = features.map((feat) => {
      const displayFeat = {};
      displayProperties.forEach((prop) => {
        displayFeat[prop] = feat[prop];
      });
      return displayFeat;
    });

    console.log("Info at this point", features);
  };

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <MAP
        initialViewState={viewport}
        mapboxAccessToken={MAPBOX_TOKEN}
        mapStyle={mapStyle}
        ref={mapRef}
        attributionControl={false}
        projection={{ name: "globe" }}
        onClick={(e) => {
          getMapPointInfo(e);
        }}
      ></MAP>
    </div>
  );
}

Environment

Framework version: "react": "^18.2.0",
Map library: "react-map-gl": "^7.1.6",
Browser: Google Chrome, Edge
OS: Windows

Logs