Function no props.removeAutor

Olá!

neste trecho de código da aula:

const TableBody = props => {

    const linhas = props.autores.map((linha, index)=>{
        return (
            <tr key={index}>
                <td>{linha.nome}</td>
                <td>{linha.livro}</td>
                <td>{linha.preco}</td>
                <td><button onClick={ () => { props.removeAutor(index) } } >Remover</button></td>
            </tr>
        )
    });

    return (
        <tbody>
            {linhas}
        </tbody>
    )
}

não entendi porque a função "removeAutor" precisa ser chamada dentro do contexto de uma arrow function.

Testei retirá-la ficando assim:

<button onClick={props.removeAutor(index)} >Remover</button>

Mas as linhas não renderizaram, e retornou o erro :

index.js:1375 Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.

Alguém pode me ajudar a entender?