I was studying ways of binding Event handler in React Js.
I tried writing an Arrow funtion as an Event Handler.
Surprisingly, when the Event is fired, the Handler keeps executing Infinite times.

Can anyone explain this behavior?

import * as React from "react";
import { Component } from "react";

class EventBinding2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: "Hii",
    };
  }

  clickHandler = (event) => {
    this.setState(() => {
      return {
        message: "Bye",
      };
    });
    console.log("Button Clicked..");
    console.log("this: ", this);
  };

  render() {
    return (
      <div>
        <button onClick={this.clickHandler}>{this.state.message}</button>
      </div>
    );
  }
}

export default EventBinding2;

I expected to fire the event and execute handler only once.