I'm making a fetch request to a API route and populating the data in page, like this

const [Records,setRecords] = useState([])
useEffect(()=>{
const getData =async()=> {
const response = await fetch(`/api/get-data?name=${session.data?.user?.name}`)
const data = await response.json()
console.log(data)
setRecords(data);}
getData()
},[session.data?.user?.name])

return(Records.map((record,index)=><span key={record.id}>{record.name})</span>)

this is /api/get-data

import prisma from "@/prisma/client";
import { NextRequest, NextResponse } from "next/server";

export async function GET(req:NextRequest){
const name=req.nextUrl.searchParams.get("name")
try {
const details = await prisma.doc.findMany({where:{name}})
return NextResponse.json(details,{status:200})
} catch (error) {
console.log(error)
return NextResponse.json({msg:"Error"},{status:503})}}
export const revalidate = 0;

I dont know why fetch() is making request thrice to the route as you can see in the attached image, first two times I'm getting empty array then the actual data. I have tried no-store, no-cache in fetch() but using that was resulting in getting first time exatct data then empty array.