'use server';

import { cookies } from 'next/headers';

export async function getCookie(key: string) {
  return cookies().get(key);
}

This is a very simple server action, retrive the cookie and return the value. However, how do I get the value in a client component, which cannot be asynchronous? Here's what I mean:

'use client'

export default function Home() {
  const value = getCookie('renderStars')
}

Here, value is just a pending promise, as the server action is asynchronous (which is required as per the docs)

How do I get the actual value of the cookie?