next.js client side component is getting updated too late

I have this [id] component in next.js, which is getting its content based on pathname, I had it in react.js but I have to write it in next.js , am generating metadata in layout.js and this is my client side page.js component(am using APP directory):

const isClient = typeof window !== 'undefined'
   const [locationChange , setLocationChange] = useState( window.location.pathname)
   
  //const id = 
  const [id, setId] = useState((window.location.pathname).substring(1))
  // const [id, setId] = useState(isClient && (window.location.pathname).substring(1))
   //console.log(id)

  const [api, setApi] = useState({})

  const [parent, setParent] = useState()
  const [istoriebi, setIstoriebi] = useState({})
  const [prescentri, setPrescentri] = useState({})
  const [exactParent, setExactParent] = useState([])
  const [itself, setItself] = useState([])
  const [width, setWidth] = useState(10)
  const language = 1;
  const ref = useRef(null)


   console.log(id)
  useEffect(() => {
    const link = 'https://mywebsite.com/api/site_menu1.php';
    fetch(link)
      .then((response) => response.json())
      .then((data) => {
        
        setPrescentri(data.menu)
        Object.entries(data.menu).map((item, index) => {
          //console.log(item[1])
           
          if (id && item[1].slug == id) {
            console.log(item[1])
            setApi(item[1].content_id)
            setParent(item[1].parent_id)

             console.log('aqamde2')
            const apiLink = `https://mywebssite.gov.ge/api/get_content.php?content_id=${item[1].content_id}`
            fetch(apiLink)
              .then((res) => res.json())
              .then((dat) => {
                setIstoriebi(dat)
                Object.entries(data.menu).map((qveitem, index) => {
                  if (qveitem[1].cat_id == item[1].parent_id) {
                      console.log('აქამდე3')
                    setExactParent(qveitem)
                    setItself(item)
                  }
                })
              })
          }

        })
      
      });

  }, [id , locationChange])

problem is that states are getting updated too late(1 update later), by that I mean that if I am currently at page 1 , and I go to page 2, content of page 2 is still of page 1, and after that if I go to page 3 , content of it is page 2;
I tried a lot of things but I can not find solution yet, any ideas?