Data is not rendered when changing pages with react router - reactjs

Question

I am using the Link component from React-Router to change pages, on the Play.tsx I have data that I am getting using useEffect from Firestore and that data is rendered on page using map function if the array length is more than 1. It works fine until I change the page and go back to /play where Play.tsx is rendered and there is no data at all, the data from firestore is ok but nothing is rendered on the page.
If I am using a normal a tag instead of Link will work fine.
Play.tsx
const [users, setUsers] = useState<any>([]);
// code...
useEffect(() => {
db.collection("users").orderBy("points", "desc").limit(10).get().then((data: any) => {
data.forEach((usr: any) => {
users.push(usr.data());
console.log(users)
})
}).catch((err) => {
console.log("An error has occured: ", err.message)
})
}, [])
return (
<>
{
users.length >= 1 ?
users.map((d: any) => {
return (
<div className="userWrapper" key={Math.random() * 9999999999999999999}>
<Link to={`/user/${d.username}`}><img className="lbImage" src={d.profileImage} /></Link>
<Link to={`/user/${d.username}`}>
<p className="lbUser">{d.username} {d.pro ? <img src={Pro} className="lbPro" /> : null}
</p>
</Link>
<p className="lbPoints">{d.points} Points, {d.rank} ({d.races} Tests)</p>
</div>
)
})
: <div className="lbSpinner"></div>
}
</>
)
OtherComponent.tsx
<Link to="/play"><li>Home</li></Link>
My route: Play.tsx (data rendered) -> OtherComponent.tsx -> Play.tsx (Data is not rendered)
Note: The problem is not at the data itself because I can console.log it, the problem is at the DOM, is like the map function on users is not calling.
Note2: I have a condition there, if I have more than 1 user on the array it will map, if not it will show a spinner, but none of these is rendered when I come back to Play.tsx, and no error is consoled.

Answer 1

In your useEffect hook you are mutating the state directly by doing users.push(usr.data())
Should be using the setUsers function from the useState hook.
useEffect(() => {
db.collection("users").orderBy("points", "desc").limit(10).get().then((data: any) => {
data.forEach((usr: any) => {
setUsers((prevState)=> ([...prevState, usr.data()]));
console.log(users)
})
}).catch((err) => {
console.log("An error has occured: ", err.message)
})
}, [])
Try changing that and see if the state is working properly