[Solução] Refatoração completa

Desde o começo do curso eu estava fazendo o código voltado pra refatoração por achar que era o método mais otimizado para construir um arquivo Typescript, e no final acabei estando certo neste quesito.

Pois apesar de bater um pouco de cabeça no decorrer do curso eu conseguia ir fazendo cada componente funcionar direitinho graças a eu recentemente ter feito o curso React: Migrando para Javascript que estava na playlist Explore React com Javascript e as pesquisas feitas para solucionar certas partes que não conseguia compreender ou que tinha erro.

Aqui estão os códigos, lembre-se que qualquer sugestão é sempre bem-vindo!

index.tsx do Botao:

import styles from './Botao.module.css';
import { ReactElement } from 'react';

interface BotaoProps {
    children: ReactElement | string;
    type?: "button" | "submit" | "reset" | undefined;
    onClick?: () => void;
}

const Botao = ({children, type= "button", onClick }: BotaoProps) => {
    return (
        <button onClick={onClick} type={type} className={styles.Botao}>
            {children}
        </button>
    )
}

export default Botao;

index.tsx do Formulario:

import { useState } from 'react';
import Botao from '../Botao';
import styles from './Formulario.module.css';
import React from 'react';
import { TarefaProps } from '../../compartilhado/Tarefa';
import { v4 as uuidv4 } from 'uuid';

interface PropsT {
    setTarefas: React.Dispatch<React.SetStateAction<TarefaProps[]>>
}

const Formulario = ({ setTarefas }: PropsT) => {

    const [lista, setLista] = useState({
        tarefa: "",
        tempo: "00:00"
    });

    const addEvento = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault()
        setTarefas(tarefasAntigas => [...tarefasAntigas,
        {
            ...lista,
            selecionado: false,
            completado: false,
            id: uuidv4()
        }]);
        setLista({
            tarefa: "",
            tempo: "00:00"
        })
    }

    return (
        <form className={styles.Form} onSubmit={e => addEvento(e)}>
            <div className={styles.Card}>
                <label htmlFor='tarefa'>Adicione um novo estudo</label>
                <input
                    placeholder='O que você quer estudar?'
                    type='text'
                    name='tarefa'
                    id='tarefa'
                    value={lista.tarefa}
                    onChange={evento => setLista({ ...lista, tarefa: evento.target.value })}
                    required
                />
            </div>
            <div className={styles.Card}>
                <label htmlFor='tempo'>Tempo</label>
                <input
                    type='time'
                    name='tempo'
                    id='tempo'
                    step='1'
                    value={lista.tempo}
                    onChange={evento => setLista({ ...lista, tempo: evento.target.value })}
                    min='00:00:00'
                    max='01:30:00'
                    required
                />
            </div>
            <Botao type="submit">Adicionar</Botao>
        </form>
    )
}

export default Formulario;