Firebase firestore information not rendering whilst using getStaticProps on Next.js

I am trying to fetch data from firebase firestore using Next.js’s getStaticProps. Without using getStaticProps, the data renders normally but when I use it I get the error

res.json() is not a function

This is how my code looks like

import React from 'react';
import { db } from '@/firebase';
import { collection, getDocs } from 'firebase/firestore';

     
export const getStaticProps = async () => {
    const res = await getDocs(collection(db, 'blogs'));
    const data = await res.json();

    return {
        props: {
            blogs: data
        }
    }
}

function index({blogs}) {
  return (
    <div>
        {blogs.map(blog => {
            <p>{blog.title}</p>
        })}
    </div>
  )
}

export default index

Where could I be going wrong?