How to make part of styles.css true, on given condition in react?

I want to make this part of code in styles.css true, only if toggleSwitch2 is true

/* if toggleswitch2 false then  */
.react-flow .react-flow__handle {
}

/* if toggleswitch2true then */
.react-flow .react-flow__handle {
  width: 30px;
  height: 14px;
  border-radius: 3px;
  background-color: #784be8;
}

the problem is, that the class that is being targeted by styles.css, doesn’t exist as an element (for example div tag) inside jsx.

const [toggleSwitch2, setToggleSwitch2] = useState(false);
    
      const handleToggleSwitch2 = () => {
        setToggleSwitch2(!toggleSwitch2);
      };


     <div className="toggle-switch-container2">
                              <input
                                id="toggle-switch2"
                                type="checkbox"
                                checked={toggleSwitch2}
                                onChange={handleToggleSwitch2}
                              />
                              <label htmlFor="toggle-switch2">
                                Make handles bigger
                              </label>
                            </div>