Why can't get this in function in React

function App() {
  function a() {
    // @ts-ignore
    console.log(this);
  }

  // @ts-ignore
  const f = a.bind(this)

  const b = () => {
    // @ts-ignore
    console.log(this)
  }
  
  return (
    <div className="container">
      <button onClick={a}>a</button>
      <button onClick={f}>f</button>
      <button onClick={b}>b</button>
    </div>
  );
}

export default App;

import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
if (container != null) {
  const root = createRoot(container); // createRoot(container!) if you use TypeScript
  root.render(<App />);
}

I know that the declarative function can get this from the obj which calls it. And the arrow function can get this from the obj in which it is defined?

But why do all of the three cases get undefined? At least a statement function can log out this with the value of the button object. I use React18.