I am having problems integrating Cosmic Js into my NextJs application

Question

I want to fill my homepage content with data from Cosmic CMS. But i am getting undefined.

Here is my code

import Container from 'containers/Container';
import SectionContainer from 'containers/SectionContainer';
import { getAllPostsForHome, PostType } from '@/lib/cosmicApi';

type Props = {
  allContent: PostType[];
};

function Page(props: Props) {
  const allContent = props.allContent;
  // console.log(allContent)
  return (
    <Container>
     // all the code
    </Container>
  );
}

export async function getStaticProps() {
  const allContent = await getAllPostsForHome();
  return {
    props: { allContent },
  };
}

export default Page;

And here is the configuration of Cosmic Js

import Cosmic from 'cosmicjs';
import ErrorPage from 'next/error';

export type PostType = {
  title: string;
  slug: string;
  metadata: {
    subtitle: string;
    content: string;
    title: string;
  };
};

const BUCKET_SLUG = process.env.COSMIC_BUCKET_SLUG;
const READ_KEY = process.env.COSMIC_READ_KEY;

const bucket = Cosmic().bucket({
  slug: BUCKET_SLUG,
  read_key: READ_KEY,
});

export const getAllPostsWithSlug = async () => {
  const params = {
    query: {
      type: 'sections',
    },
    props: 'slug',
  };
  const data = await bucket.getObjects(params);
  return data.objects;
};

export const getAllPostsForHome = async (): Promise<PostType[]> => {
  const params = {
    query: {
      type: 'sections',
    },
    props: 'title,slug,metadata',
    status: 'any',
  };
  const data = await bucket.getObjects(params);
  return data.objects;
};

Please help me fix this thing. I am stuck with it the whole day

I want the data to be shown but i am getting this unexpected behavior. Please help