NextJS 13 fails to fetch from internal api route when deploying - mongodb

Question

When fetching from /api in npm run dev or npm run build/start my code is working, but when try to deploy it on Vercel it fails to fetch. Im using Next js 13 with app dir.
here is my code on the client (server component)
`const getAvailableSlots = async () => {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/api/availabilityList`
);
if (!res.ok) {
console.log(res);
}
return res.json();
};
const Appointments = async () => {
const data = await getAvailableSlots();
return (
<div className="App">
<div>
<AppointmentsPage data={data} />
</div>
</div>
);
};
export default Appointments;`
and this is the /api route:
`const handler = async (req, res) => {
await connectDB();
console.log("Connected to Mongo");
try {
const availiblityList = await Users.find();
res.status(200).send(availiblityList);
} catch (error) {
res.status(400).send(error.message);
}
};
export default handler;`
I tried directly accessing the data from the server since its server components, but in development mode it loads on the first time with warning that only can pass down simple object as props and can't reload after that.
`import { getData } from "../../pages/api/availabilityList";
const getAvailableSlots = async () => {
const res = await getData();
return res;
};
const Appointments = async () => {
const data = await getAvailableSlots();
console.log(data);
return (
<div className="App">
<div className="section section0 fp-auto-height-responsive items-center">
<AppointmentsPage data={data} />
</div>
</div>
);
};
export default Appointments;`
/api
`export async function getData() {
await connectDB();
const response = await Users.find();
return response;
}
const handler = async (req, res) => {
const jsonData = await getData();
res.status(200).json(jsonData);
};
export default handler;`
The Warning:
Warning: Only plain objects can be passed to Client Components from Server Components. Objects with toJSON methods are not supported. Convert it manually to a simple value before passing it to props. [{$__: ..., $isNew: false, _doc: ...}, ...]
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^