I have a client component that uses Framer Motion with drag handlers. I have a callback function en the drag end to update the data. For now I'm doing it on the client since in this function I need to update some local states. But I also want to revalidate the data.

How in the following example can I call a server function on a dragEnd callback function?

"use client";

export const MyComponent = () => {
  const handleEndDrag = async () => {
    // Update some states
    // ...
    // Now I want to updat some data on the server using a server action
    // How can I do it?
  }

  return (
  <motion.div drag onDragEnd={handleEndDrag}>
    Hello World
  </motion.div>
)}