My code from the useEffect , I have given dependency array , but also useNavigate is not called in the useEffect , still there is a requirement of two time click to return to previous page

Even tried redirect () but did not work

 useEffect(() => {
    
    const storedAccessToken = localStorage.getItem('accessToken') || '';
   
    const fetchData = async (token) => {
      try {
        const response = await axios.get(`${BASE_URL}/predict/popularity_prediction_tasks/`,{
          headers: {
            Authorization: `Bearer ${token}`,
          },
        });
       
        const data = await response.data;
        console.log(data);
       
        
        const completed = data.filter(song => song.status === 'completed');
        localStorage.setItem('completedSongs', JSON.stringify(completed));
        console.log(completed)
        setSongs({
          inProgress: data.filter(song => song.status === 'pending'),
          completed: data.filter(song => song.status === 'completed'),
          failed: data.filter(song => song.status === 'failed'),
        });
      } catch (error) {
        console.error('Error fetching songs:', error);
      }
    };

    fetchData(storedAccessToken);
  }, []);

  const handleSectionClick = (section) => {
    setActiveSection(section);
  };

  const handleCardClick = (id,click) => {
    if(click){   
    const clickedSong = JSON.parse(localStorage.getItem('completedSongs'))?.find(song => song.id === id);
    localStorage.setItem('clickedSong', JSON.stringify(clickedSong)); 
 
     navigate(`/song-upload-result/${id}`);
    
    }
  };

Fix the bug , in Chrome , where it requires two clicks to more forward and backward in pages using browser button