TypeError: this.props.escutadorDeSubmit is not a function

Boa noite,

Estou com esse erro e não sei o motivo. Creio que meu código está igual o do instrutor.

Erro: TypeError: this.props.escutadorDeSubmit is not a function Formulario.submitFormulario C:/Users/daniel.carneiro/Desktop/react-parte1/projeto/curso-react-alur/src/Formulario.js:26 23 | } 24 | 25 | submitFormulario = () =>{

26 | this.props.escutadorDeSubmit(this.state); | ^ 27 | this.setState(this.stateInicial); 28 | } 29 |

Formulario.js

import React, { Component } from 'react';

class Formulario extends Component {

    constructor(props) {
        super(props);

        this.stateInicial = {
            nome: "",
            livro: "",
            preco: "",
        }

        this.state = this.stateInicial;
    }

    escutadorDeInput = event => {
        const { name, value } = event.target;

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

    submitFormulario = () =>{
        this.props.escutadorDeSubmit(this.state);
        this.setState(this.stateInicial);
    }

    render() {

        const { nome, livro, preco } = this.state;  

        return (
            <form>

                <label htmlFor="nome">Nome</label>
                <input
                    id="nome"
                    type="text"
                    name="nome"
                    value={nome}
                    onChange={this.escutadorDeInput}
                />

                <label htmlFor="livro">Livro</label>
                <input
                    id="livro"
                    type="text"
                    name="livro"
                    value={livro}
                    onChange={this.escutadorDeInput}
                />


                <label htmlFor="preco">Preço</label>
                <input
                    id="preco"
                    type="text"
                    name="preco"
                    value={preco}
                    onChange={this.escutadorDeInput}
                />

                <button onClick={this.submitFormulario} type="button">Salvar
    </button>
            </form>
        )
    }
}

export default Formulario;

App.js

import React, { Component, Fragment } from 'react';
import './App.css';
import Tabela from './Tabela'
import Form from './Formulario'

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'
    },
    {
      nome: 'Nico',
      livro: 'Java',
      preco: '999'
    },
    ],
  };


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

    this.setState(
      {
        autores: autores.filter((autor, posAtual) => {
          return posAtual !== index;
        }),
      }
    );
  }

  escutadorDeSubmit = autor => {
    this.setState({ autores: [...this.state.autores, autor] })
  }

  render() {

    return (
      <Fragment>
        <Tabela autores={this.state.autores} removeAutor={this.removeAutor} />
        <Form escutadorDeSubmit = {this.escutadorDeSubmit}/>
      </Fragment>
    );
  }
}


export default App;

Agradeço a ajuda!