[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

htmlFor="title"
className="block text-gray-700 font-medium mb-2 leading-tight"
>
Title

type="text"
name="title"
id="title"
value={content.title}
onChange={handleEditorChange}
className="w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-gray-500"
/>


htmlFor="description"
className="block text-gray-700 font-medium mb-2 leading-tight"
>
Description

name="description"
id="description"
value={content.description}
onChange={handleEditorChange}
className="min-h-32 w-full px-3 py-2 border border-gray-300 rounded focus:outline-none focus:border-gray-500"
>

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

);
}
`