How to remove the class from another instance of the component on click?

Question

React

There is this component:

export const ButtonRoom = (props) => {
        const [activeRoom, setActiveRoom] = useState(false)
        const setRoom = () => {
            setActiveRoom(!activeRoom)
        }
        return(
            <button onClick={()=>setRoom()} className={activeRoom ? "room__active button" : "button"}>
            </button>
        )
    }

At the moment, I can assign/remove the class on click only for the element on which the click is made, but how can I remove the class from another instance of the component?

Answer 1

I commented above, but in theory the component from the mountain should not do this at all. Or he sends a message to the parent, and he drives either the general state for the application or the event bus

Answer 2

If the component whose class should change is located much higher than the component that should initialize the class change, then either props through the chain, or use the context, or fasten some storage ala redux.
But React.createContext is probably what you need.