Does React.js handle "static" differently? compound components

Shouldn't the static keyword refer to a global variable for the class itself and is not related in anyway to the instance of the component?

then why in the compound component pattern, when we instantiate multiple components of the same class they tend to behave seperatly ,although they depend on a static variable

So to my understanding to the "static" keyword is that it's a global variable to all instances of the class and a change in that variable should change all the components in that class

  static On = (props)=> props.on ? props.children : null 
  static Off = (props)=> !props.on ? props.children : null 
  static Button = ({on,toggle})=> <Switch on={on} onClick={toggle}/>
    return React.Children.map(this.props.children, child=>{
      return React.cloneElement(child,{
        on:this.state.on,
        toggle:this.toggle
      })
    })

  <>
    <Toggle onToggle={onToggle}>
      <Toggle.On>The button is on</Toggle.On>
      <Toggle.Off>The button is off</Toggle.Off>
      <Toggle.Button />
    </Toggle>


    <Toggle onToggle={onToggle}>
      <Toggle.On>The button is on</Toggle.On>
      <Toggle.Button />
      <Toggle.Off>The button is off</Toggle.Off>
    </Toggle> 
  </>

I honestly expected both components to be toggled on and off when i affected one of them, could someone explain this to me?