React method binding

Question

I learned react and now I wanted to learn a little bit more on how it actually works "behind the scenes". So I learned that babel when using a class based component creates a class and in the render method is calling the React.createElement function and all the attributes used in the JSX are passed to that function as an object.

For example this code:

class Action extends React.Component {
  handlePick() {
    console.log('test');
  }

  render() {
    return (
      <div>
        <button onClick={this.handlePick}>What should I do?</button>
      </div>
   )
}}

Will look something like this:

_createClass(Action, [{
  key: 'handlePick',
  value: function handlePick() {
      console.log('test');
  }
}, {
  key: 'render',
  value: function render() {
    return React.createElement(
      'div',
      null,
      React.createElement(
        'button',
        { onClick: this.handlePick },
        'What should I do?'
    )
    );
}}]);

The button has all his attributes in the object in this example there is only the onClick attribute.

So what I don't understand is for example I have this component and I pass the handleRemoveAll function in the attribute onClick without binding the current Component, and this function just prints an array in the Options' props

class Options extends React.Component {
  handleRemoveAll() {
    console.log(this.props.options);
  }

  render() {
    return (
      <div>
        <button onClick={this.handleRemoveAll}>Remove All</button>
        {this.props.options.map(option => <Option key={option} option={option}/>)}
      </div>
    )
  }
}

This is what babel translates it to: (sorry for the badly formatted text idk why it happens after I paste the code)

var Options = function (_React$Component4) {
  _inherits(Options, _React$Component4);

  function Options() {
    _classCallCheck(this, Options);

    return _possibleConstructorReturn(this, (Options.__proto__ || Object.getPrototypeOf(Options)).apply(this, arguments));
}

_createClass(Options, [{
    key: 'handleRemoveAll',
    value: function handleRemoveAll() {
        console.log(this.props.options);
    }
}, {
    key: 'render',
    value: function render() {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'button',
                { onClick: this.handleRemoveAll },
                'Remove All'
            ),
            this.props.options.map(function (option) {
                return React.createElement(Option, { key: option, option: option });
            })
        );
    }}]);

So the button element has the function that I passed in the object { onClick: this.handleRemoveAll }When I click the button in the console it says "Cannot read properties of undefined (reading 'props')" but the function onClick is in the object that I mentioned above, so my question is: Shouldn't the THIS keyword reference the object with the parameters because it sits in it, instead of returning undefined?