How can I understand 'bind'?

It is a little difficult for me to understand “this.handleClick = this.handleClick.bind(this)”, actually I don’t know what happened after we write this code, anybody can help me with this? And why we don’t use bind when we use 'this.props 'and ‘this.state’? Thanks

  **Your code so far**

class MyComponent extends React.Component {
constructor(props) {
  this.state = {
    text: "Hello"
  // Change code below this line
  this.handleClick = this.handleClick.bind(this);
  // Change code above this line
handleClick() {
    text: "You clicked!"
render() {
  return (
      { /* Change code below this line */ }
      <button onClick = {this.handleClick}>Click Me</button>
      { /* Change code above this line */ }
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36

Challenge: Bind ‘this’ to a Class Method

Link to the challenge:

In essence, it is due to how the keyword this works in Javascript. FCC itself has an excellent article going over the details here