Erro

Os seguintes erros aparecem e não consegui consertar pra fazer funcionar. Alguém sabe me explicar por quê depois de adicionar a função selecionaTarefa ele começou a dar erro no tarefas ?

ERROR in src/components/Lista/index.tsx:11:18

TS2339: Property 'tarefas' does not exist on type 'Props'.
     9 |
    10 |
  > 11 | function Lista({ tarefas, selecionaTarefa} : Props ) {
       |                  ^^^^^^^
    12 |   return (
    13 |     <aside className={style.listaTarefas}>
    14 |       <h2> Estudos do dia </h2>


ERROR in src/components/Lista/index.tsx:16:23

TS7006: Parameter 'item' implicitly has an 'any' type.
    14 |       <h2> Estudos do dia </h2>
    15 |       <ul>
  > 16 |         {tarefas.map( item => (
       |                       ^^^^
    17 |           <Item 
    18 |             selecionaTarefa={selecionaTarefa}
    19 |             key={item.id}


ERROR in src/pages/App.tsx:19:9

TS2322: Type '{ tarefas: [] | ITarefa[]; selecionaTarefa: (tarefaSelecionada: ITarefa) => void; }' is not assignable to type 'IntrinsicAttributes & Props'.
  Property 'tarefas' does not exist on type 'IntrinsicAttributes & Props'. Did you mean 'tarefa'?
    17 |       <Formulario setTarefas={setTarefas}/>
    18 |       <Lista 
  > 19 |         tarefas={tarefas} 
       |         ^^^^^^^
    20 |         selecionaTarefa={selecionaTarefa}
    21 |       />
    22 |       <Cronometro />

App.tsx

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

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

  function selecionaTarefa(tarefaSelecionada: ITarefa){
    setSelecionado(tarefaSelecionada);
  }
  return (
    <div className={style.AppStyle}>
      <Formulario setTarefas={setTarefas}/>
      <Lista 
        tarefas={tarefas} 
        selecionaTarefa={selecionaTarefa}
      />
      <Cronometro />
    </div>
  );
}

export default App;

Lista>index.tsx

import { ITarefa } from '../../Types/tarefa';
import Item from './Item'
import style from './Lista.module.scss';

interface Props {
  tarefa: ITarefa[],
  selecionaTarefa: (tarefaSelecionada: ITarefa) => void
}


function Lista({ tarefas, selecionaTarefa} : Props ) {
  return (
    <aside className={style.listaTarefas}>
      <h2> Estudos do dia </h2>
      <ul>
        {tarefas.map( item => (
          <Item 
            selecionaTarefa={selecionaTarefa}
            key={item.id}
            {...item}
          />
        ))}
      </ul>
    </aside>
  )
}

export default Lista;

Lista>Item>index.tsx

import { ITarefa } from '../../../Types/tarefa';
import style from '../Lista.module.scss';

interface Props extends ITarefa {
    selecionaTarefa: (tarefaSelecionada: ITarefa) => void
}

export default function Item(
    {
        tarefa, 
        tempo, 
        selecionado, 
        completado, 
        id, 
        selecionaTarefa
    } : Props) {
    console.log( "item atual: ", {tarefa, tempo, selecionado, completado, id})
    return (
        <li 
            className={style.item} 
            onClick={() => selecionaTarefa(
                {
                    tarefa,
                    tempo,
                    selecionado,
                    completado,
                    id
                }
            )}
        > 
            <h3> {tarefa} </h3>
            <span> {tempo} </span>
        </li>
    )
}