삭제하기 기능 오류 질문있습니다.

import Link from "next/link";

export default async function ListItem({ data }) {
return (
<div>
{data.map((a, i) => {
return (
<div key={i} className="list-item">
<Link key={i} href={`/detail/${a._id}`}>
<h4>{a.title}</h4>
<p>{a.content}</p>
</Link>
<Link href={`/edit/${a._id}`}>✏️</Link>
<span
onClick={() => {
fetch("/api/delete/delete", {
method: "DELETE",
body: `${data[i]._id}`,
 });
 }}>
 🗑️
</span>
</div>
 );
 })}

<button className="writeBtn">
<Link href={`/write`}>+</Link>
</button>
</div>
 );
}

삭제하기 기능 만드는데

<span
onClick={() => {
fetch("/api/delete/delete", {
method: "DELETE",
body: `${data[i]._id}`,
});
}}>
🗑️
</span>

span테그에 onclick에 fetch를 넣었더니

Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props. <span onClick={function} children="🗑️"> ^^^^^^^^^^ If you need interactivity, consider converting part of this to a Client Component.

이런 오류가 나는데요. 
삭제 버튼은 클라이언트 컴포넌트로 만들어서 추가해야될까요?