Next.js 13 navigation router refresh preserves state

I have this below component and it's included withing a Server Component that fetches data and render it. As it can be seen I call router.refresh() on click so it will rerun that page and refetch the data. And it does but the problem is Nextjs keep preserving this state, so when i call setRefreshing(true) even though server component rerun refreshing state is still true.

'use client'
import { useRouter } from 'next/navigation'
import Button from './Button'

export default function Refresh() {
  const [refreshing, setRefreshing] = useState(false)
  const router = useRouter()

  const handleClick = () => {
    setRefreshing(true)
    router.refresh()
  }

  return (
    <Button onClick={handleClick}>
      <i className={`bi bi-arrow-repeat text-lg ${refreshing ? 'animate-spin' : ''}`}></i> 
      Refresh
    </Button>
  )
}

useEffect is also not running after refresh so i can't set it to false in there either. I've found a workaround to pass an array prop to the component which then it will rerun useEffect(() => {...}, [serverHackyProp]).

<Refresh inProgress={[false]} />


const [[refreshing], setRefreshing] = useState(inProgress)
const router = useRouter()

useEffect(() => {
  setRefreshing(inProgress)
}, [inProgress])

const handleClick = () => {
  setRefreshing([true])
  router.refresh()
}

It works because passed array will always have a new reference so useEffect will run every time server rerun. But I don't like to do that unless it's my last choice but i couldn't find a way to setRefreshing(false) after router refreshed (server refetched).

One trivial solution to this problem is to have your data fetching function return some random value as part of the response, and use that random value as a key of your Refresh component. This way your Refresh component will be teared down and re-created every time server-side data is refreshed.

// setting revalidate to 0 just for the testing purpose
export const revalidate = 0;

async function getData() {
  return { data: ..., sid: Math.random() };
}

export default async function Page() {
  const data = await getData();

  return (
    <>
      <Refresh key={data.sid} />
      ...
    </>
  );
}