I have this client component and a server-side function that it calls. It calls it, and it all works, but I've no idea how and why it works... Anyone can help?

Client component. This has to be a client component due to "on change":

'use client'
 import Checkbox from '@mui/joy/Checkbox';
 import Typography from '@mui/joy/Typography';
 import { useTransition } from 'react';
 // @ts-expect-error -- useFormState is new and lacks type definitions
 import { experimental_useFormState as useFormState } from 'react-dom'
 import { completeTodo } from './todo-actions';

 const initialState = {
   message: null,
 }

export function DoneForm({ tenantid, title, complete }: { tenantid: string, title:   string, complete: boolean }) {
   const [isPending, startTransition] = useTransition();

   return (
         <Checkbox 
           label={<Typography>{title}</Typography>}
           checked={complete} 
           onChange={() => startTransition(
             () => { completeTodo(tenantid, title, !complete) }
         )}/>
   )
}

The function that this client component called is defined in a separate file:

'use server'
// ^^^ This has to run on the server because it uses database operations and updates the cache

import { revalidatePath } from 'next/cache'
import { cookies } from 'next/headers';
import nile from '@/lib/NileServer';
import { configureNile } from '@/utils/AuthUtils';

export async function completeTodo( tenantId: string, title:string, complete: boolean) {
        configureNile(cookies().get('authData'), tenantId);
        await nile.db("todos").update({complete: complete}).where({title: title})
        revalidatePath('/tenants/${tenantID}/todos')
}