Here is the routes structure in the image,

and here is my code for the base route:

 const mapBlog = () =>{
    return blog?.map((bl,idx)=>{
      return(
        <div key={idx} className='flex flex-col flex-wrap w-[600px] h-[600px] gap-5 border p-8 rounded-md'>
        
          <Link href={{pathname: `/blog/${bl.id}/`
        }}>
          
            <div className='' id='img'><Image height={500} width={500} className='' alt='title_img' key={idx} src={bl.image}></Image></div>
         
          <div className='flex justify-center text-2xl font-bold' id='title'>{bl.title}</div>
          </Link>
          <div className='flex flex-row flex-nowrap justify-between w-[500px]'>
          <div className='' id='username'>{bl._username} </div>
          <div className='' id='created_at'> {new Date(bl.created_at).toLocaleDateString('en-gb',{
            day:'numeric',
            month:'long',
            year:'numeric'
          })}</div>
          </div>
          <div className ='' id='tags'>{bl.tags.map((tag)=>{
            return(
            <div key='' className='flex flex-row flex-nowrap gap-1'>
              <button className="">#{tag}</button>
            </div>
            )
          })}</div>

        </div>
      )
    })
  }

and here is my code for the blog/[id] route:

   return(
        <Modal isOpen={true}>
            <ModalHeader>{blog?.title}</ModalHeader>
        </Modal>
    )

i am using next-ui Modal, I still get redirected to a different page, but this is not supposed to happen with route interception, i can't figure out how to fix this?

2nd problem: when I reload the page where the Modal is, it gives me 404 not found?