Эта область в функции стрелки в Javascript

Насколько я понимаю, стрелочная функция должна иметь ту же область видимости, что и контекст, в котором она была создана. Как показано ниже, один ответ: «Это большой зеленый ящик с номером», что я понимаю.

let box6 = {
    color:'green',
    position:1,
    font:'big',
    clickMe:function(){
    return ()=>{
    let str='This is the box number '+this.color+' '+ this.font;
    console.info(str)
    }  }
    }

но в классе React функция стрелки handleClick определена в классе LoggingButton, предполагается, что у нее такая же область видимости, но в консоли она возвращает: это LoggingButton, я думал, что она должна возвращать глобальную область или любую другую область на один уровень выше, чем LoggingButton. почему это происходит? Большое Вам спасибо!!!

class LoggingButton extends Component {
  handleClick=()=>{
    console.info('this is :', this)
  }
  render() {
    return (
      <div className = "App">
       <button onClick = {this.handleClick}>Click Me</button>
      </div>
    );
  }
}