Next.js 13 で client component でデータを post する方法について

クライアントコンポーネントから非同期のリクエストを送るには use hook と cache を用いることで可能かと思います。

ts

1"use client";2 3const getHoge = cache(async (): Promise<Hoge[]> => {4 const response = await fetch("http://localhost:3000/api/hoge");5 return await response.json();6});7 8const Input: FC = () => {9 const hogeList: Hoge[] = use(getHoge());10

しかし use hook は自作のメソッドの中からは呼べないはずです。
そこで以下のような Hoge データを post するための関数をボタンのクリックイベントで呼び、戻り値を上記 hogeList に push したい場合どうすれば良いでしょうか？
一つの解決策として const hogeList: Hoge[] = use(getHoge()); を sever component 内で行い、ボタンのクリックイベントで router.refresh(); をするという方法があります。しかしコンポーネントを分けたくない場合などあり、それ以外で良い方法はありますでしょうか？

ts

1const postHoge = async (request: Omit<Hoge, "id">): Promise<Hoge> => {2 const response = await fetch("http://localhost:3000/api/hoge", {3 method: "POST",4 headers: {5 "Content-Type": "application/json",6 },7 body: JSON.stringify(request),8 });9 return await response.json();10 };

もしご存知の方いましたらご教示いただけますと幸いです。