Mapbox Click and Hover condition conflicting

I’m trying to implement some logic

paint: {
  "fill-color": "#627BC1",
  "fill-opacity": [
    "case",
    ["==", ["feature-state", "mystate"], 1],
    0.6,
    ["==", ["feature-state", "mystate"], 2],
    0.8,
    0.4
  ]
}

The problem I have is, when I click on something and then move my mouse, then the hover condition applies and then removes the clicked state. How can I make the hover stop impacting the clicked state?

    map.on('click', 'state-fills', (e) => {
       var description = e.features[0].properties.country;  
       document.getElementById("popup").innerHTML = description;
       map.setFeatureState(
          { source: "states", id: hoveredStateId },
          { mystate: 2 }
       );
    });
    
 
     // When the user moves their mouse over the state-fill layer, we'll update the
     // feature state for the feature under the mouse.
     map.on('mousemove', 'state-fills', (e) => {
         if (e.features.length > 0) {
             if (hoveredStateId !== null) {
                map.setFeatureState(
                   { source: "states", id: hoveredStateId },
                   { mystate: null }
                );
             }
             hoveredStateId = e.features[0].id;
             map.setFeatureState(
                { source: "states", id: hoveredStateId },
                { mystate: 1 }
             );
         }
     });

I feel like I need a condition on hover to say if the mystate on that area is already at 2 then do nothing. This is what I tried but it didn’t work:

         if (hoveredStateId !== null) {
            map.setFeatureState(
               { source: "states", id: hoveredStateId },
               { mystate: null }
            );
         }
         if (hoveredStateId !== 2) {
         hoveredStateId = e.features[0].id;
         map.setFeatureState(
            { source: "states", id: hoveredStateId },
            { mystate: 1 }
         );
         }