Can't delete by id from mongoDB in nextjs app

0

I'm making an app in nextjs to practice, and I am having a hard time getting single data to delete from the database using the findByIdAndDelete function.

CastError: Cast to ObjectId failed for value "undefined" (type string) at path "_id" for model "Appointment"

./page.jsx

import AddAppointment from "./addAppointment";import DeleteAppointment from "./deleteAppointment";import UpdateAppointment from "./updateAppointment";async function getAppointment() {  const res = await fetch("http://localhost:3000/api/appointment", {    method: "GET",    cache: "no-store",  });  // const data = await res.json();  return res.json();}async function Appointment() {  const { appointment } = await getAppointment();  return (<div className="py-10 px-10"><div className="py-2"><AddAppointment /></div><table className="table w-full"><thead><tr><th>#</th><th>Nama</th><th>Tanggal</th><th>No Telp.</th><th>Terapis</th><th>Status</th><th>Action</th></tr></thead><tbody>          {appointment.map((row, i) => (<tr key={row._id}><td>{i + 1}</td><td>{row.name}</td><td>{row.date}</td><td>{row.phone}</td><td>{row.terapist}</td><td>{row.statust || "unknown"}</td><td className="flex"><UpdateAppointment {...appointment} /><DeleteAppointment {...appointment} /></td></tr>          ))}</tbody></table></div>  );}export default Appointment;

./deleteAppointment.jsx

"use client";import { useState } from "react";import { useRouter } from "next/navigation";export default function DeleteAppointment() {  const [modal, setModal] = useState(false);  const router = useRouter();  async function handleDelete({ id }) {    await fetch(`http://localhost:3000/api/appointment?id=${id}`, {      method: "DELETE",    });    router.refresh();    setModal(false);  }  function handleChange() {    setModal(!modal);  }  return (<div><button className="btn btn-error btn-sm" onClick={handleChange}>        Delete</button><input        type="checkbox"        checked={modal}        onChange={handleChange}        className="modal-toggle"      /><div className="modal"><div className="modal-box"><h3 className="font-bold text-lg">            Anda yakin untuk menghapus data ""?</h3><div className="modal-action"><button type="button" className="btn" onClick={handleChange}>              Close</button><button type="button" onClick={handleDelete} className="btn">              Delete</button></div></div></div></div>  );}

api route

import { connectMongoDB } from "@/lib/mongodb";import Appointment from "@/models/appointment";import { NextResponse } from "next/server";export async function DELETE(req) {  const id = req.nextUrl.searchParams.get("id");  await connectMongoDB();  await Appointment.findByIdAndDelete(id);  return NextResponse.json({ message: "Appointment deleted" }, { status: 200 });}

Model

import mongoose, { Schema, models } from "mongoose";const appointmentSchema = new Schema(  {    name: {      type: String,      required: true,    },    date: {      type: String,      required: true,    },    phone: {      type: String,      required: true,    },    terapist: {      type: String,      required: true,    },    statust: {      type: String,      required: true,    },  },  { timestamps: true });const Appointment =  models.Appointment || mongoose.model("Appointment", appointmentSchema);export default Appointment;

CastError: Cast to ObjectId failed for value "undefined" (type string) at path "_id" for model "Appointment"

having hard time to figure how to passing id and difference between id and _id