Javascript – Next JS Unhandled Runtime Error Error: Cannot read properties of undefined (reading 'status')

While making a portfolio website with Next.js, this is some sort of error that I’m getting.

I am using the latest version of Next.js which is next 13.4.16 and I am using app router in my project.

this code is written inside page.ts which is placed inside app/getExperience

import type {NextApiRequest,NextApiResponse} from 'next';

import {groq} from "next-sanity";
import {sanityClient} from '../../sanity'
import {Experience} from "../../typings"

const query = groq
`*[_type == "experience"]{
  ...,
  technologies[]->
}`
type Data = {
  experiences: Experience[]
}

export default  async function handler(
  req:NextApiRequest,
  res:NextApiResponse<Data>
){
  const  experiences: Experience[] = await sanityClient.fetch(query)

  res.status(200).json({experiences})
}

this is typing.d.ts file in the root folder

interface SanityBody {
    _createdAt: string;
    _id: string;
    _rev:string;
    _updatedAt:string;
}

export interface Social extends SanityBody {
    _type: "social";
    title:string;
    url:string;
}

interface Image {
    _type: 'image';
    asset:{
        _ref:string;
        _type:'reference';
    };
}

export interface PageInfo extends SanityBody{
    _type:'pageInfo';
    address: string;
    backgroundInformation: string;
    email:string;
    role:string;
    heroImage: Image;
    name: string;
    phoneNumber: string;
    profilePic: Image;
}

export interface Technology extends SanityBody{
    _type: "skill";
    image: Image;
    progress: number;
    title: string;
}

export interface Skill extends SanityBody{
    _type: "skill";
    image: Image;
    progress: number;
    title: string;
}

export interface Project extends SanityBody{
    _type: "project";
    title: string;
    image: Image;
    linkToBuild: string;
    summary: string;
    technologies: Technology[];
    
}

export interface Experience extends SanityBody{
    _type: "experience";
    company: string;
    companyImage: Image;
    dateStarted:date;
    dateEnded:date;
    isCurrentlyWorkingHere: boolean;
    jobTitle: string;
    points: string[];
    technologies: Technology[];
}

this code is written inside sanity.ts file which is also under root folder

import {createClient} from 'next-sanity'
import createImageUrlBuilder from '@sanity/image-url'

export const config = {
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: process.env.NEXT_PUBLIC_SANITY_DATASET|| "production",
  apiVersion: process.env.NEXT_PUBLIC_SANITY_API_VERSION || '2022-11-15',
  useCdn: process.env.NODE_ENV === 'production',
  
};

//setup the client for fetching data in the getProps page functions
export const sanityClient = createClient(config);

export const urlFor = (source: any) => createImageUrlBuilder(config).image(source)

enter image description here

this is the error I am getting