Hi, I'm new to Next.js. Using V14.1. I have a server action like this:

export const destroyUserSession = async () => {
    const userSession = await getIronSession(cookies(), sessionOptions);
    userSession.destroy();
}

And I import it and use it like this in a client component:

'use client'

import { destroyUserSession } from "@/actions/session";
import { useRouter } from "next/navigation";

export default function LogoutButton() {
    const router = useRouter();
    const handleLogout = async (e) => {
       
      destroyUserSession();

      router.push('/login');
    }
    return (
      <>
         <button onClick={handleLogout}>Logout</button>
      </>
   )
}

Is it OK to do that? It works... but it seems odd I must say.