nao remove

import React,{Component} from "react";

const TheadC =()=>{
    return (
        <thead>
          <tr>
            <th>autor</th>
            <th>livro</th>
            <th>preco</th>
          </tr>
        </thead>
    );
}



 const TbodyC = props =>{



    let linha = props.autores.map((element,index)=>{

        return (<tr key = {index}>    

                    <td>{element.nome}</td>
                    <td>{element.livro}</td>
                    <td>{element.preco}</td>
                    <td><button onClick={()=>props.removeAutor(index)}>remover</button></td>
              </tr>);
    })


    return (<tbody>
                {linha}
            </tbody>);
 }


 export class Tabela extends Component
{
    render()
    {
        const {autores,removerAutor} = this.props 



        return(
        <table> 

            <TheadC/>
            <TbodyC autores={autores} removeAutor = {removerAutor}/>

      </table>);
    }
}


export default Tabela

import React,{Component} from "react";
import './App.css';
import Tabela  from "./tabela"


class App extends Component 
{ 

  state = {

    autores : [
      {
        nome: 'Paulo',
        livro: 'React',
        preco: '1000'
      },
      {
        nome: 'Daniel',
        livro: 'Java',
        preco: '99'
      },
      {
        nome: 'Marcos',
        livro: 'Design',
        preco: '150'
      },
      {
        nome: 'Bruno',
        livro: 'DevOps',
        preco: '100'
      }
    ]

  };


   removerAutor = (index)=>
    {
        const {autores} = this.state;

        return this.setState({

          autor: autores.filter((autorAtual,indice)=>{


              return index !== indice ;
          })
        })

    };

    render()
    {
      return  <div className="app">
        <Tabela autores = {this.state.autores} removerAutor = {this.removerAutor}/>

      </div>

    }



  }

export default App;

nao da nenhum erro mas nao esta apagando