document.querySelector not working in react

Question

I have div ids like slide1, slide2, slide3, slide4, slide5 but when selecting it using querySelector, it's showing me null.

For testing, I tried this, but never printed "hello". Why is this happening

   if(document.querySelector('#slide-3'))
      {
   console.log("Slide-3 exist")
    }

const [current, setCurrent] = useState(1)
    
    useEffect(()=>{
    if (current === 6) setCurrent(1)
    document.querySelector(`#slide-${current > 5?1:current}`).scrollIntoView();
    }, [current])




return (
    {posts.map((item, i) => (
   <div> <button onClick={() => {setCurrent(cur=>cur+1)}}>Next</button>
   <div id={`slide-${i+1}`}> <h1>Hello world</h1></div>
   </div>})
    )