Utilizando Axios e api externa, tentei carregar os dados na tabela, mas deu erro! Não sei onde esta o erro =/

Boa tarde,

Estou adaptando os passos do projeto do instrutor com a nova versão do REACT e utilizando a biblioteca "axios". Porém, não consigo gravar os dados na tabela quando digitado o valor e clicado em gravar.

Para trazer os dados da api externa, consegui utilizando a biblioteca axios e aproveitando esta URL base: http://cdc-react.herokuapp.com/api.

Porém, até comentei este código, pois, quero seguir o passo do instrutor e quando digitar os dados e clicar em gravar a tabela grave os dados digitados.

Onde estou errando?

Segue o código:

//cdc-admin/src/pages/Main/index.js

import React from 'react';
import api from '../../services/api';

class Main extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      lista: [],
      nome: '',
      email: '',
      senha: '',

    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);

  }

  componentDidMount() {
    this.loadAuthors();
  }

  loadAuthors = async () => {
    const response = await api.get('/autores/');
    this.setState({ lista: response.data });
    console.log(response);
  }

  handleChange(event) {
    this.setState({
      [event.target.name]: event.target.value
    });
  }

  handleSubmit(event) {
    event.preventDefault();
    const { nome, email, senha } = this.state;

    console.log('Dados enviados', nome);
    console.log('Dados enviados', email);
    console.log('Dados enviados', senha);


    api.post( 
      '/autores/',
      { nome: nome, email: email },
    )
      .then(() => console.log('Dados salvos com sucesso!'))
      .catch(response => console.log('Error:', response))


  }


  render() {

    const { lista } = this.state;

    return (
      <>
        <div id="main">
          <div className="header">
            <h1>Cadastro de Autores</h1>
          </div>
          <div className="content">
            <div className="pure-form pure-form-aligned">

              <form className="pure-form pure-form-aligned" onSubmit={this.handleSubmit} method='post'>
                <div className="pure-control-group">
                  <label htmlFor="nome">Nome</label>
                  <input id="nome" type="text" name="nome" value={this.state.nome} onChange={this.handleChange} />
                </div>
                <div className="pure-control-group">
                  <label htmlFor="email">Email</label>
                  <input id="email" type="email" name="email" value={this.state.email} onChange={this.handleChange} />
                </div>
                <div className="pure-control-group">
                  <label htmlFor="senha">Senha</label>
                  <input id="senha" type="password" name="senha" value={this.state.senha} onChange={this.handleChange} />
                </div>
                <div className="pure-control-group">
                  <label></label>
                  <button type="submit" className="pure-button pure-button-primary">Gravar</button>
                </div>
              </form>

            </div>
            <div>
              <table className="pure-table">
                <thead>
                  <tr>
                    <th>Nome</th>
                    <th>email</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>{this.state.nome}</td>
                    <td>{this.state.email}</td>
                  </tr>

                  {/* {
                    lista.map(autor =>
                      <tr key={`${autor.id}`}>
                        <td>{autor.nome}</td>
                        <td>{autor.email}</td>
                      </tr>
                    )
                  } */}
                </tbody>
              </table>
            </div>
          </div>


        </div>
      </>


    )
  }
}

export default Main;

E a api está sendo carregada através da biblioteca axios neste arquivo:

//cdc-admin/src/services/api/index.js

import axios from 'axios';

const api = axios.create({baseURL:'http://cdc-react.herokuapp.com/api'});

export default api;

O que estou fazendo de errado?

No aguardo, obrigada!