When I click the <RefreshBtn> component all the components rerender the data. But the suspense fallback is not showing

const Home = () => {
  return(

   <RefreshBtn />
     <Suspense fallback={<NoteSkeleton />}>
        <Feed />
      </Suspense>
  )
}
export default Home

Refresh Btn component just make a router.refresh() when clicked

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

async function RefreshBtn () {
    const router = useRouter();

      const handleBtn = async (e) => {
        router.refresh();
        }

    return (
        <button onClick={handleBtn}>
            Refresh
        </button>
    );
};

export default RefreshBtn;

Feed component is a server component that fetch data from the api

import PromptCard from './PromptCard';

// use to fetch data from api
async function fetchPosts() {
    try{
        const response = await fetch('http://localhost:3000/api/prompt', { cache: 'no-store' });
        const data = await response.json();
        const posts = data;
        return posts;
    } catch(error) {
        console.log(error);
    }
}

// render the Feed component
async function Feed() {
    const posts = await fetchPosts();
    console.log(posts);
    return (

      <div className='mt-16 prompt_layout'>

        {posts.map((post) => (
          <PromptCard
            key={post._id}
            post={post}
          />
        ))}

      </div>
    );
}

export default Feed;