삭제기능 만들기에서 오류

안녕하십니까?
서버 기능 구현 강의를 들으면서
소스 구현을 하는 중
다음의 오류가 발생하는데 어떤걸 확인해야 할까요?

---------( ListItem.js )----------------------------

'use client'

import Link from "next/link"

export default function ListItem({result}) {
    return (
        <div>
            {
                result.map((a, i) =>
                    <div className="list-item" key={i}>
                        <Link href={'/detail/'+ result[i]._id}>
                            <h4>{result[i].title}</h4>
                        </Link>
                        <p />
                        <Link href={'/edit/' + result[i]._id}>✏️</Link>
                                              
                        <span onClick={(e) => {
                             fetch('/api/post/delete', { method: 'DELETE', body: result[i]._id })
                             .then((r) => r.json())
                             .then(() => {
                                e.target.parentElement.style.opacity = 0;
                                setTimeout(() => {
                                    e.target.parentElement.style.display = 'none'
                                }, 1000)
                             })
                        }}>🗑️</span>  
                        <p>1월 1일</p>
                    </div>
                )
            }
        </div>
    )
}

--------( 오류 메시지 )-------------------

Console Error

[ Server ] 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.
  {_id: {buffer: ...}, title: "a", content: ...}

감사합니다.