Component trong App.js không chạy

[hamhochoi97 (vinh_sat_thu)]

Chào mn , mình có bỏ thêm 2 cái component TodoForm và ThemeToggle vào App.js mà có ThemeToggle chạy còn TodoForm nó không chạy , vậy là lỗi gì mọi người
code trong app.js

import React from 'react';
import './App.css';
import TodoForm from './components/TodoForm';
import ThemeToggle from './components/ThemeToggle';
import ThemeContextProvider from './context/ThemeContext';
import AuthContextProvider from './context/AuthContext';
import Test from './components/Test';
function App() {
  return (
    <div className="App">
      <h2>Xin chào</h2>    
      <ThemeContextProvider>
        <ThemeToggle/>      
          <AuthContextProvider>            
            <TodoForm/>
          </AuthContextProvider>
          <Test/>
      </ThemeContextProvider>    
    </div>
  );
}
export default App;

code trong TodoForm.js

import React, {useContext} from "react";
import {AuthContext} from '../context/AuthContext';
const TodoForm = () => {
    const { auth } = useContext(AuthContext);
    const  { toggleState }=useContext(AuthContext);
    console.log('sao k chay nhi');
    // const display=auth?'you are logged!':'';
    // const showState=auth?'Logout':'Login';
    return (
        <div className='todoForm'>
            <div onClick={toggleState}>
                <h3>{auth?'you are logged!':''}</h3>
                <button>{auth?'Logout':'Login'}</button>
            </div>                    
            <form action="">
                <input
                    type="text"
                    name="title"
                    placeholder="enter a new todo..."
                    required
                />
                <input
                    type="submit"
                    value="Add"
                />
            </form>
        </div>
    )
}
export default TodoForm;

code trong AuthContext.js

import React, {useContext} from "react";
import {AuthContext} from '../context/AuthContext';
const TodoForm = () => {
    const { auth } = useContext(AuthContext);
    const  { toggleState }=useContext(AuthContext);
    console.log('sao k chay nhi');
    // const display=auth?'you are logged!':'';
    // const showState=auth?'Logout':'Login';
    return (
        <div className='todoForm'>
            <div onClick={toggleState}>
                <h3>{auth?'you are logged!':''}</h3>
                <button>{auth?'Logout':'Login'}</button>
            </div>                    
            <form action="">
                <input
                    type="text"
                    name="title"
                    placeholder="enter a new todo..."
                    required
                />
                <input
                    type="submit"
                    value="Add"
                />
            </form>
        </div>
    )
}
export default TodoForm;