[Help please] how can i solve the issue? there is an object called diary comming from an database and passed to component where a useState hook expecting that object. at build time it gives the following error.

import { db } from "@/db";
import DiaryEditForm from "@/components/diary-edit-form";
interface DiaryEditPageProps {
params: {
id: string;
};
}
export default async function DiaryEditPage(props: DiaryEditPageProps) {
const id = parseInt(props.params.id);
const diary = await db.diary.findFirst({
where: { id },
});
return (
<div>
<DiaryEditForm diary={diary} />
</div>
);
}

`"use client";

import { Diary } from "@prisma/client";
import { useState } from "react";
import * as actions from "@/actions";

interface DiaryEditFormProps {
diary: Diary;
}
export default function DiaryEditForm({ diary }: DiaryEditFormProps) {
const [content, setContent] = useState(diary);
const handleEditorChange = (event: {
target: { name: string; value: string };
}) => {
const { name, value } = event.target;
setContent((prevContent) => ({
...prevContent,
[name]: value,
}));
};
const editDiaryAction = actions.editDiary.bind(
null,
diary.id,
content.title,
content.description
);
return (

Edit your Diary

  <button
    type="submit"
    className="bg-gray-600 text-white px-4 py-2 rounded"
  >
    Save
  </button>
</form>

);
}
`