1 Sub Question Answer:

Inline Arrow Function is created on render because the function definition is inside of the onClick handler, which is inside of the component render method (or return, in the case of functional React components).

You’d use an inline function to pass in additional arguments to a function, such as a value from a loop, or the target button’s value.

Let’s take a look at an example:

import React from 'react';

function App() {
  return (
    <button onClick={() => alert('hello'))}>
      Click me!
    </button>
  );
}

export default App;

2 Sub Question Answer: You can use to use it. You can take a look at different ways you can do the onClick Event Handling here

The 'anonym/arrow-function' function is for pass the reference of the function, and that reference react will call when detect the event. Is like variable storage

If you cant use it, you can pass a reference of a normal function

const handleSubmit = (...args) =>  {}
<form onSubmit={handleSubmit} className={classes.form}>

the args will get all event parameters of anything that event handle