Why do these similar react function passing statements work in different ways?

Question

I have simple react page showing a Tree component and a series of fields. Right now I have the Tree hardcoded, but the fields as passed in as props. Also passed in as props are two parent callbacks. One for the Tree onSelect and one for the <input> onChange event. In both cases, the specific 'on' Event is a local function that in turn calls the parent's callback. This is all working....

In both cases the local functions reference the 'this' variable. In one local function, the Tree onSelect', I had to use the '.bind(this)' way but, in the other I did not. Both local functions can access the 'this.props.' values. However, if I remove the '.bind(this)' from the one used in the Tree component it fails. The 'this' is undefined.

I am new to react, so I'm just trying to figure what goes where. I'm guessing this has something to do with the Tree being a component and the <input> as something more basic?

Thanks for any insights...

import React, { Component } from "react";
import Tree from '@naisutech/react-tree'
import './RecipePage.css';

class RecipePage extends Component {

constructor(props){
    super(props);
    this.state = { items: props.items,};
}

onMySelect (props)  {
    debugger;
    const items = this.state.items.slice();
    console.log("HI" , props);
}

handleChange = ({ target }) => {
    debugger;
    const items = this.state.items.slice();
    items[parseInt(target.id)+1].defaultValue = target.value;
    this.setState({items: items,});
    var props = {items, target};
    this.props.onInputChanged(props); // call the parent's update function send relavent data.
};

render() {

    const t8000 = [
        {
            label: 'Gauge 1',
            id: 1234,
            parentId: null,
            items: null
        },
        {
            label: 'Target',
            id: 1236,
            parentId: 1234,
            items: null
        },
        {
            label: 'Gage Factor',
            id: 5678,
            parentId: 1234,
            items: null
        },
        {
            label: 'Gauge 2',
            id: 1235,
            parentId: null,
            items: null
        },
        {
            label: 'Target',
            id: 2236,
            parentId: 1235,
            items: null
        },
    ]

    const myTheme = {
        'my-theme': {
            text: '#161616', 
            bg: '#f1f1f1',
            highlight: '#cccccc', // the colours used for selected and hover items
            decal: 'green', // the colours used for open folder indicators and icons
            accent: '#f1f1f1' // the colour used for row borders and empty file indicators
        }
    }

    return(
       <div id="recipePage" className="recipeMenu" >
           <div className="closeButton"  >
               <img src={require('./../CommonImages/closeButton_W_90x90.png')} height="90px" onClick={() => this.props.close()} alt="Menu buttons"></img>
                    <Tree nodes={t8000} onSelect={this.onMySelect.bind(this)} theme = {'my-theme'} customTheme={myTheme} />
                    <form>
                    <fieldset>
                    <legend>this.state.items[0].label}</legend>
                    {this.state.items.map((item, key) =>(
                       <div className={item.show===1 && key!==0 ?"ShowInputs":"HideInputs"}>
                                    <label htmlFor={item.id}>{item.label} </label>
                                    <input type="text" name={item.id}
                                    id={item.id} value={item.defaultValue}
                                    onChange={this.handleChange} /> 
                        </div>
                     ))}
                     </fieldset>
              </form>
           </div>
       </div>
    );
                        }
}
export default RecipePage;