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 (

{blogs.map(blog => {

{blog.title}

})}

)
}

export default index
Where could I be going wrong?

Regards: https://crackscut.com/