useSelector gives me the a different state from the previous page

I have a baffling issue. I have two pages on my website. If I load them separately - they display everything correctly. However, if I click on one and then the other. The second page shows a render error. After some digging, I realized that the problem is that the value of the constant I got with useSelector from the previous page is now returned as the state constant I got on the current page. This is what I mean:

My first page is myLists, and I am getting the user's own lists value from my store:

and my console.log is showing me the correct format which I expect from the value:

And my second page is querying a completely different value from the store: a collection of lists from the community. This value has a different format:

Usually, the format of this value is this:

however, when I navigate from the previous page (myLists) to the current page, this useSelector variable ("commLists") is showing me the exact same thing as myLists:

And because myLists and commLists have different data structure, the content of myLists got loaded into commLists, causing my page to malfunction. Does anyone know why this is the case??

To give more context, this is my myLists page:

export const MyLists: FC = () => {
   const auth = useAppSelector((state)=>state.auth.token)
   const navigate=useNavigate()
   const dispatch=useAppDispatch() 

   useEffect(
      ()=>{
      if(auth==""||auth==null)
      {navigate(`/signin`)}
      else{
         dispatch(resetResult());
         dispatch(getLists())
      }
   }, [])
  
   **const myLists = useAppSelector(state=>state.myLists.lists)**
   const [deleteDisplay, toggleDelete] = useState([false, ""])
   const [editDisplay, toggleEdit] = useState([false, ""])

   const listNameField = useAppSelector((state) => state.myLists.listNameField)
   const listCommentField = useAppSelector((state) => state.myLists.listCommentField)
   if(auth==""||auth=="null")
   {  console.log("unauthorized block is called")
      return (<SignInComponent />)}


   const redirect = (e: React.SyntheticEvent) => {
      const listID=e.target.parentElement.parentElement.id
      navigate(`/myLists/${listID}`)}
   const submitChange = (e: React.SyntheticEvent) => {...}
   const change = (e: React.SyntheticEvent) => {...}

   console.log(myLists)
  
   const listDisplay = myLists.map(elem=>{
      const cancelFn = ()=> toggleDelete([false, ""])
      const deleteFn = (item: string) => dispatch(deleteList(item))
      const id=elem.listID
      console.log(elem)
      return (
          <li key={elem.listID} id={elem.listID} className={styles.eachList}>
            <div className={styles.canvas} id="listImage" ><Canvas listObj={elem}/></div>
            <div className={styles.title}>{elem.listTitle}</div>
            <div className={styles.buttons}>
               <button onClick={redirect}>View</button>
               <button onClick={(e)=>showActionWindow(e, 'list', elem.listTitle, deleteDisplay, toggleDelete)}>Delete List</button>
               <button onClick={(e)=>showActionWindow(e, 'list', elem.listTitle, editDisplay, toggleEdit)}>Edit List Details</button>
            </div>
            <div className={styles.windowOne}>
               {listForm(editDisplay, elem, change, submitChange, listNameField, listCommentField)}
            </div> 
            <div className={styles.windowTwo}>
               {confirmDeleteQuestionWindow(deleteDisplay, 'list', elem.listTitle, cancelFn, deleteFn)}
            </div>
          
          </li>
      )
   })
   return (<div className={styles.myLists}>
      {listDisplay}
      </div>)

}

And this is my second page "WatchedLists"

export const WatchedLists: FC = () => {
   const auth = useAppSelector((state)=>state.auth.token)

   const navigate=useNavigate()
   const dispatch=useAppDispatch() 
  
   useEffect(
      ()=>{
      if(auth==""||auth==null)
      {navigate(`/signin`)}
      else{
         dispatch(getCommLists())
      }
   }, [])
   
   const redirect = (e: React.SyntheticEvent) => {
      const listID=e.target.parentElement.parentElement.id
      navigate(`/myLists/${listID}`)}
   
   **const commLists = useAppSelector((state)=>state.watchedLists.commLists)**
   
   console.log(commLists)
   const communityLists = commLists.map(elem=>{

      return (
         <li key={elem.currList.listID} id={elem.currList.listID} className={styles.eachList}>
           <div className={styles.canvas} id="listImage" ><Canvas listObj={elem.currList}/></div>
           <div className={styles.title}>{elem.currList.listTitle} compiled by {elem.listMakerName}</div>
           <div className={styles.buttons}>
              <button onClick={redirect}>View</button>
           </div>
         </li>
     )
   })


   const displayList = (commLists: listObject[]) => {
      if(commLists.length==0)
      {return <p>Please be patient, community reading lists are loading...</p>}
      else{ return <div>{communityLists}</div>; }
   }

   return <div>
      <h2>Discover the booklists of other users</h2>
      <div>{displayList(commLists)}</div>

   </div>
}

the vive versa, if I open "watchedLists" page (with the "commLists" variable) first, then open the "myLists" page (with the "myLists" variable), then the value of "myLists" logs out to be the same as "commLists" from the previous page.

And I am sure that my store is set up correctly because if I reload/refresh the page, the page loads correctly. Does anyone know why this is the case? It seems like weirdly useAppSelector is 'persisting' a value as a navigate to the other page and not really working according to the command of the current page.