I'm currently writing a Next.js, and I'm not sure how to update the isBookmarked boolean value in my code that will persist to the database from my component. Here's what I have currently.

Item.js

<Item>
...
<div onClick={????????}>....</div> //Update value on database from here
...
</Item>

index.js

export async function getServerSideProps(context){
  const client = await clientPromise;

  const db = client.db("mediaData")
  let media = await db.collection("media").find({}).toArray();
  media = JSON.parse(JSON.stringify(media));
  

  return{
    props:{ media} 
  }
}
......
media.map((item) => (
            <Item
              key={item._id}
              mediaBookmarked={item.isBookmarked} // value recived from the database
              year={item.year}
              category={item.category}
              rating={item.rating}
              title={item.title}
              small={item.thumbnail.trending.small}
              large={item.thumbnail.trending.large}
            />
....

Will I need to define a schema? I manually imported the information that populates this database from a JSON file.