[Bug] Erro ao compilar

Fiz igual o professor e está acontecendo este erro:

Compiled with problems: × ERROR in src/App.tsx:9:8 TS2769: No overload matches this call. Overload 1 of 2, '(props: { setTarefas: Dispatch<SetStateAction<ITarefa[]>>; } | Readonly<{ setTarefas: Dispatch<SetStateAction<ITarefa[]>>; }>): Formulario', gave the following error. Property 'setTarefas' is missing in type '{}' but required in type 'Readonly<{ setTarefas: Dispatch<SetStateAction<ITarefa[]>>; }>'. Overload 2 of 2, '(props: { setTarefas: Dispatch<SetStateAction<ITarefa[]>>; }, context: any): Formulario', gave the following error. Property 'setTarefas' is missing in type '{}' but required in type 'Readonly<{ setTarefas: Dispatch<SetStateAction<ITarefa[]>>; }>'.

   7 |     <div className="App">
    8 |       {/* Renderizar um component - <nome /> */}
 >  9 |       <Formulario />
      |        ^^^^^^^^^^
   10 |       <Lista />
   11 |     </div>
   12 |   );

ERROR in src/App.tsx:10:8 TS2741: Property 'tarefas' is missing in type '{}' but required in type '{ tarefas: ITarefa[]; }'.

   8 |       {/* Renderizar um component - <nome /> */}
    9 |       <Formulario />
 > 10 |       <Lista />
      |        ^^^^^
   11 |     </div>
   12 |   );
   13 | }

Meu App.tsx

import React, { useState } from 'react';
import Formulario from '../components/Formulario';
import Lista from '../components/lista';
import style from './App.module.scss';
import Cronometro from '../components/Cronometro';
import { ITarefa } from '../types/tarefas';

function App() {
  const [tarefas, setTarefas] = useState <ITarefa[] | [] > ([]);

  return (
    <div className={style.AppStyle} >
      <Formulario setTarefas={setTarefas} />
      <Lista tarefas={tarefas} />
      <Cronometro />
    </div>
  );
}

export default App;

Formulario:

import React, { ReactElement } from "react";
import Botao from "../Botao";
import style from './Formulario.module.scss';
import { ITarefa } from "../../types/tarefas";

class Formulario extends React.Component <{
    setTarefas: React.Dispatch<React.SetStateAction< ITarefa[] >>
}> {
    state = {
        tarefa: "",
        tempo: "00:00"
    }
    adicionarTarefa(evento: React.FormEvent) {
        evento.preventDefault();
        this.props.setTarefas(tarefasAntigas => [...tarefasAntigas, {...this.state}]);
    }

    render() {
        return (
            <form className={style.novaTarefa} onSubmit={this.adicionarTarefa.bind(this)} >
                <div className={style.inputContainer}>
                    {/* htmlFor - se clicar no label quer que o input seja focado */}
                    <label htmlFor="tarefa">
                        Adicione um novo estudo
                    </label>

                    <input 
                        type="text"
                        name="tarefa"
                        id="tarefa"
                        value= {this.state.tarefa}
                        onChange= {evento => this.setState( {...this.state, tarefa: evento.target.value} )}
                        placeholder="O que você quer estudar?" required
                    />
                </div>

                <div className={style.inputContainer}>
                    <label htmlFor="tempo">
                        Tempo
                    </label>

                    <input type="time"
                        step="1"
                        name="tempo"
                        onChange= {evento => this.setState( {...this.state, tempo: evento.target.value} )}
                        id="tempo"
                        min="00:00:00"
                        max="01:30:00" required
                    />
                </div>
                {/* Usar um component em outro  */}
                <Botao type="submit"
                    // criar uma PROP - propriedade
                    texto="Adicionar"
                    // Com o tipo Children é só Adicionar
                    // Adicionar
                />

            </form>
        )
    }
}

export default Formulario;

Lista:

import { ITarefa } from '../../types/tarefas';
import Item from './Item';
import style from './Lista.module.scss';


function Lista( {tarefas}: {tarefas: ITarefa[] } ) {

    return (
        <aside className={style.listaTarefas}>

            <h2>Estudos do Dia</h2>
            <u>
                { tarefas.map( (item, index) => (
                    <Item 
                        key={index}
                        tarefa={item.tarefa}
                        tempo={item.tempo}
                    />
                ) ) }
            </u>
        </aside>
    )
}

export default Lista;