JsonデータからGoogleMap上にマークする

Question

概要

ReactでGoogleMapにピンを表示する可視化ツールの作成をしています。
APIを叩いて帰ってきたレスポンスデータ（JSON）データから、PINを表示させたいのですが
うまくいかず困っています。

該当のソースコード

resPoi.ts

export type resPoi ={
  items: [
    {    
      id: number;
      lat: number;
      lng: number;
    }
  ];
     status: string;
};

response.data(Json)

{items: Array(14)}
↓
0: { id:'1', lat:'35.6545', lng: '126.9778'}
1: { id:'2', lat:'32.9750', lng: '123.4742'}
.
..
...
13:{ id:'14', ......}

GetApi.ts

import axios from "axios";
import { useState, useCallback  } from "react"; 
import { resPoi } from "../types/resPoi";

export const useGetApi = () => {

　　　const [apiParams, setParams] = useState<resPoi>();
    
     const getApi = () =>{  

       axios.get<resPoi>(`API/path`, {
          params: params,  //クエリparam
          headers: {
            "x-api-key": 'key',
          }
          
        })
        .then((res) => {
          setParams(res.data); //ステートのapiParamsにres.data
          console.log(res.data);
          
        })
        .catch((error) => {
          alert(error);
        })
      }

    return { apiParams, getApi }
};

main.tsx

  const { apiParams, getApi } = useGetApi();
  
  const getPlaces = useCallback (() => {
    const places: { lat: number; lng: number}[] = [];
    if (apiParams?.status === '') {
      console.log(apiParams.items);

      apiParams.items.map((poi) => {
        places.push({
          lat: poi.lat,
          lng: poi.lng,
        });
      });
    }
      return places;
  }, [apiParams]);

 return(
    <React.StrictMode>
       <googlemap resPoi={getplaces()} />
   </React.StrictMode>

googlemap.tsx

<<省略>>

type point ={
    lat:number;
    lng: number;
};

type Props ={
  resPoi: Array<point>;
}

export const Googlemap = (props: Props) => {

  const { resPoi } = props


return(
    
      <LoadScript googleMapsApiKey={API_KEY} >
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={center.center}
          zoom={center.zoom}
        >
          {/* <Marker position={position.Poi1} />
          <Marker position={position.Poi2} /> */}

          {resPoi.map((marker: point) => (
            <Marker 
              key={`${marker.lat * marker.lng}`}
              position={{
                lat: marker.lat,
                lng: marker.lng,
              }} />
          ))}
        </GoogleMap>
      </LoadScript>
    
  );
};

試したこと

画面上にはピンが表示されず、エラーも出ないので何が原因かわからない状態です。

予想は、JSONデータをapiParamに渡せていないのではないかと思っています。