Firebase Realtime Database in web app shows popup at wrong moment

I use Firebase to synchronize all the users, but somehow my popup showed up when I refresh the page. It should be shown when the spin stops.

When I trigger the spin I reset the result as false first

 // Function to trigger the spin in Firebase

function triggerSpinInFirebase() {
  set(ref(database, 'spin-result'), { won: false });  // Reset result first  
  const spinAngle = Math.random() * 360;  
  set(ref(database, 'spin-status'), {
    isSpinning: true,
    spinAngle: spinAngle,
    currentSpinTime: 10  
  });
}

and then I store the result to Firebase and call the popup function after spin

function storeSpinResultInFirebase(result) {
  set(ref(database, 'spin-result'), {
    label: result.label,
    won: true,  // Ensure the spin result is stored properly
  });
}

const resultRef = ref(database, 'spin-result');
onValue(resultRef, (snapshot) => {
  const result = snapshot.val();
  if (result && result.won) {  
    showPopup(result);
  }
});