Почему функции x.func1 x.fun2 x.func3 не работают в onClick?

Question

[Shakir Darion]

Это мой код

function App() {
  const x = {
    value: 10,
    func1() {
      console.log(this.value, "111");
    },
    func2: function() {
      console.log(this.value, "222");
    },
    func3: () => {
      console.log(this.value, "222");
    }
  };
  return (
    <div>
      <h1 onClick={x.func1}>1</h1>
      <h1 onClick={x.func2}>2</h1>
      <h1 onClick={x.func3}>3</h1>
    </div>
  );
}

Я создал объект X, у него есть 3 функции func1, func2, func3. Почему функции x.func1, x.fun2 x.func3 не работают в onClick?