My dynamic route with NextJS will not finish compiling when I test it. It gets stuck and then is killed.

Here's my link route that leads to the dynamic page:

const options = props.response.data.map(r => (
            <Link href={`/games/${r.gameID}`}>
            <Flex key={r.gameID} borderWidth="1px">
                <Box p="2" as="button" borderWidth="1px">
                <Image
                    src={r.thumb}
                    alt={props.gameID}
                    width={{ md: 20 }}
                    height={{ md: 10 }} />
                </Box>
                <Spacer />
                <Box p="2">
                    <Text>{r.external} - {r.cheapest}</Text>
                </Box>
            </Flex>
            </Link>
        ))

This leads to my dynamic NextJS page called games that uses the [id] parameter in the URL. I call async getStaticPaths and getStaticProps shown below:

export async function getStaticPaths(){
    const router = useRouter()
    const gameID = router.query.id

    return {
        params: {
            id: gameID
        }
    }
}

export async function getStaticProps({ params }) {
    // Call an external API endpoint to get game data
    
    // Access route params:
    

    const response = await axios.get(`https://www.cheapshark.com/api/1.0/games?id=${params.id}`)
    const gameData = response.json()

    return {
      props: {
        data: gameData,
      },
    }
  }

Then I pass the gameData as a prop to the default exported function. Any ideas where I am going wrong?