Client Side Component Rendered inside a server component not hot reloading on page code change

Question

I am creating a food ordering app and trying to implement server-side rendering to fetch data and render data in Next.js but I am stuck in a modal where my modal is a client component rendered inside another client component which is rendered inside another client which is rendered inside a server component which fetches data from server using fetch and renders the component using map my problem is whenever I make any changes to my code in the modal it does not hot reload and refreshing the page also does not help i have to rerun my dev server i have shared the code down below.

I have designed a modal inside a client-side rendered component

export const Modal = ({item,open,close}) => {
if(!open){return null}
 return (
<div className='fixed inset-0 bg-black/80 flex items-center justify-center'>
<div className=' bg-white    h-full w-96'>
<Image src={item.image} alt='product-image' width='100px'/>
  <p>modal </p>
 </div>
 </div>
  )
}

This modal is rendered inside a client-side component called MenuItem

const MenuItem = ({item}) => {
  const [showModal,setShowModal]=useState(false)
  const cartHandler = ()=>{
    console.log(item)
    if(item.sizes.length>0||item.ingredients.length>0){
     setShowModal(true)
    }
  }
  return (
    <>
      <Modal item={item} open={showModal} close={setShowModal}/>
        <div className=' px-2 justify-center bg-gray-200 rounded-lg text-center hover:bg-white hover:shadow-2xl hover:scale-105 transition-all duration-300'>
      <Image className='mx-auto my-2' src={item.image} alt='pizza' width='150' height='150'/>
  <p className='text-xl font-bold text-gray-700'>
   {item.name}
       </p> 
      <p className='text-gray-500 text-sm line-clamp-3'>
   {item.description}
            </p>
   <button type='button' onClick={cartHandler} className='rounded-full my-2 hover:bg-primary/70>
    Add To Cart ₹200
    </button>
   </div>
  )}

export default MenuItem

This MenuItem is rendered inside HomeMenu.jsx

const HomeMenu = ({item}) => {
  return (
<section>
   <div className='absolute w-full  left-0 right-0 justify-start'>
   <div className='absolute  left-0 -top-[70px] text-left '>
        <Image src='/sallad1.png' height={100} width={106} />
   </div>
    <div className='absolute -top-[100px] right-0 -z-10'>
     <Image src='/sallad2.png' height={100} width={106}/>
    </div>
    </div>
    <div className='text-center '>
       <SectionHeader primaryHeader={'MENU' }subHeader={'checkout'}/>
    </div>
   <div className='mx-auto grid grid-cols-4  gap-4 mt-4'>
   {
    item.data?.slice(-3).map((item)=>(
      <HomeMenuCard item={item}/>
    ))
   }
   </div>
</section>
  )
}

this HomeMenu item is rendered inside a server component which is Page.js where i am asynchronously getting data from server using fetch, the code is mentioned below :

const getData = async ()=>{
  const data = await fetch('http://localhost:3000/api/profile/menu',{
    next:{
      tags:['bestseller'],
    }
  })
  return data.json()
}
export default async function Home() {
  const data = await getData()
  return (
    <>
    <Hero/>
    <HomeMenu item={data}/>
    </>
  )
}

I have tried using the revalidate function but it did not work for me