i am building an application within nextjs using prisma on the back end
many of my components are structured as following

<Layout>
  <main>
   <Button>
    <PopupMenu>
     <!-- client component due to pop up and use state !-->
     <form>
      <script>
         prisma post/update request
      </script>
     </form>
    </PopupMenu>
   </Button>
 </main
</Layout>

how do you recommend i these prisma requests when i am

1. in a client component such as above
2. in a server component

thankyou in advance!

attempts:

1. using prisma directly within the client component. it said that it could not be packed / used in said componetns
2. using /api/tasks POST that i created. i could not pass a body perameter into it even though it tried. therefore data could not be passed from component to server
3. attempting wrapping the form within a server component (cannot be done since the form itself uses UseState