I am using Strapi with Next.js for my blog project

I am trying to make dynamic pages by using [id].js inside pages/posts/[id].js

But, the problem is when I try to map through the API of Strapi inside getStaticPaths() it gives me an error with data.map is not defined

Note:- I am using NextJS V12.0.8 with Strapi V4.0.4

Below is my code

export async function getStaticPaths() {
  const postsRes = await axios.get("http://localhost:1337/api/posts?populate=image");
 
  const paths = postsRes.map((post) => {
    return { params: {id: post.id.toString()} }
  });

  // const paths = { params: {id: '1' } }
    
  return {
    paths,
    fallback: false
 
  }
 
}

Complete [id].js Page Code Link - https://pastebin.com/SnzLirys

Error Screenshot - https://prnt.sc/26ha6z5