Getting error Unsupported type undefined for heading & paragraph

I am using @notionhq/client to get pages

My page https://vishwasraj.notion.site/hello-world-8fb2880e72204bdb8b05fa8b4653fdfe

Request Setup

const notion = new Client({
  auth: 'secret'
});

const getPage = async (pageId) => {
  const response = await notion.pages.retrieve({ page_id: pageId });
  return response;
};

getStaticProps

export async function getStaticProps({ params: { slug } }) {
  const page = await getPage(slug);
  const blocks = await getBlocks(slug);
  console.log(blocks);
  return {
    props: {
      blocks,
      page
    }
  };
}

Response

[
  {
    object: 'block',
    id: '29eab320-fd21-42db-922e-8d8b637472ef',
    created_time: '2022-01-03T08:44:00.000Z',
    last_edited_time: '2022-01-03T08:44:00.000Z',
    has_children: false,
    archived: false,
    type: 'heading_3',
    heading_3: { text: [Array] }
  },
  {
    object: 'block',
    id: '99d4ab1f-0406-4f1f-afce-3f3017a8b0b5',
    created_time: '2022-01-03T08:44:00.000Z',
    last_edited_time: '2022-01-03T08:44:00.000Z',
    has_children: false,
    archived: false,
    type: 'paragraph',
    paragraph: { text: [Array] }
  }
]

Template

export default function BlogPost({ blocks }) {
  return <NotionRenderer blockMap={blocks} />;
}

Tried using https://github.com/NotionX/react-notion-x with same response. But got error TypeError: Cannot convert undefined or null to object <NotionRenderer recordMap={blocks} fullPage={true} darkMode={false} />

I am following this blog post https://splitbee.io/blog/notion-as-cms-using-nextjs

I saw this api endpoint. The structure seems to be very different than the one I am currently getting from notion api. https://notion-api.splitbee.io/v1/page/2e22de6b770e4166be301490f6ffd420

Am I missing somethig or should I transform the api response before passing on to NotionRenderer ? Is notion-api-worker necessary for react-notion to work ?

splitbee / react-notion

Getting error Unsupported type undefined for heading & paragraph #97