تمرین تبدیل کد HTML به React Components

سلام خسته نباشید

متاسفانه من زمان ارسال پاسخ آزمون تبدیل کد HTML به React Components رو از دست دادم

دیگه بعد از اتمام زمان امکان ارسال نیست

من اینجا پاسخ رو ارسال میکنم در صورت امکان یه بررسی بفرمایید ممنون میشم

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            max-width: 300px;
            display: flex;
            flex-direction: column;
            margin: 0 auto;
        }
        #todo-app {
            margin: 1em;
            text-align: center;
        }
        #todo-list,
        #todo-stats {
            margin: 1em auto;
            text-align: left;
            width: 450px;
        }
        #todo-list {
            list-style: none;
            padding: 0;
        }
        #todo-stats {
            color: #777;
        }
        #new-todo {
            border-radius: 5px;
        }
        .todo-input {
            display: block;
            font-family: Helvetica, sans-serif;
            font-size: 20px;
            line-height: normal;
            margin: 5px auto 0;
            padding: 6px;
            width: 420px;
        }
        .todo-label {
            color: #444;
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script  type="text/babel">
        //----- todo app -----//
        function TodoLabel() {
            return <label className="todo-label" htmlFor="new-todo">What do you want to do today?</label>
        }
        function TodoInput() {
            return <input type="text" id="new-todo" className="todo-input" placeholder="type your tasks"/>
        }
        function TodoApp() {
            return <div id="todo-app">
                        <TodoLabel/>
                        <TodoInput/>
                    </div>
        }
        //----- todo item -----//
        function TodoItemCheckbox() {
            return <input type="checkbox"/>
        }
        function TodoItemTaskLable(params) {
            return  <span className="todo-content">task 1</span>
        }
        function TodoItem() {
            return <div className="todo-item">
                            <TodoItemCheckbox/>
                            <TodoItemTaskLable/>
                    </div>
        }
        //----- todo list -----//
        function TodoList() {
            return <div className="todo-list">
                       <TodoItem/> 
                    </div>
        }
        function Container() {
            return <div className="container">
                        <TodoApp/>
                        <TodoList/>
                    </div>
        }
        ReactDOM.render(<Container/> , document.getElementById('root'))
    </script>  
    </div>
</body>
</html>