無法使用 getStaticProps 將數據從頁面傳遞到子組件

我正在處理 next.js 項目，我正在嘗試將數據從“gymlist”頁面傳遞到“table”組件。

這是我有 getStaticProps 函數的“gymlist”頁面：

export default function Gyms({gyms}) {
   return (
       <Table gyms={gyms}/>
   )
}

export async function getStaticProps() {
  const res = await fetch(`${server}/api/gyms`)
  const gyms = await res.json()
  console.log(gyms);
  if (!gyms) {
    return {
      notFound: true,
    }
  }
  return {
    props: {
      gyms,
      // Will be passed to the page component as props
    },
  };
  
}

console.log 正確顯示了我在數據庫中的健身房列表。

這是我收到錯誤的表組件：gyms.map is not a function

export default function Table(props) {
   const [gyms, setGyms] = useState(props);

   return (
   {gyms?.map((gym, index) => (
      <p> {gym.name} </p>
   ))}
   );
}