React “Uncaught TypeError: ontoggle is not a function” exception when a function from parent is passed in

I’ve been trying a tutorial video in YouTube named React JS Crash Course 2021 and i have created a TaskCheckbox component for a Task component. TaskCheckbox component has a function “ontoggle” and an id:number passed in as constructor parameters. It is only supposed to call the function in App.js and console.log the id for now.

The hierarchy is as following: App => Tasks => Task => TaskCheckbox

Even though i am pretty sure i passed the right functions to its child for each component i am unable to locate the reason of the exception: “Uncaught TypeError: ontoggle is not a function”

App.js snippet:

const taskSelectHandler = (e, id) => {
    console.log(id)
    //setTasks(tasks.map(task => task.id === id ? task.selected = e.target.checked : ""))
  }
return (
    <div className='main'>
      <div className = "container">
        <Header className="header-title" title="TASK TRACKER" />
        <section className='tasks-outer-container'>
          {tasks.length > 0 ? 
            <Tasks tasks={tasks} ondelete={deleteTask} ontoggle={taskSelectHandler}/>
          :
          <p className="info-text">Go set some tasks!  </p>  
          }
        </section>
      </div>
    </div>
  )
}

Tasks.js snippet:

const Tasks = ({tasks, ondelete, ontoggle}) =>{
    return (
        <div className='tasks-container'>
            {
                tasks.map((task) => (
                <Task key={task.id} task={task} ondelete={ondelete} ontoggle={ontoggle}/>)
                )
            }
        </div>
    )
}

Tasks.propTypes = {
    tasks: PropTypes.array,
    ondelete: PropTypes.func.isRequired,
    ontoggle: PropTypes.func.isRequired,
}

export default Tasks

Task.js snippet:

const Tasks = ({tasks, ondelete, ontoggle}) =>{
    return (
        <div className='tasks-container'>
            {
                tasks.map((task) => (
                <Task key={task.id} task={task} ondelete={ondelete} ontoggle={ontoggle}/>)
                )
            }
        </div>
    )
}

Tasks.propTypes = {
    tasks: PropTypes.array,
    ondelete: PropTypes.func.isRequired,
    ontoggle: PropTypes.func.isRequired,
}

export default Tasks

TaskCheckbox snippet:

const TaskCheckbox = (ontoggle, id) => {
    return (
        <div className="task-checkbox-container">
            <input className="task-checkbox" onClick={(e) => ontoggle(e, id) } type="checkbox"></input>
        </div>
    )   
}

TaskCheckbox.propTypes = {
    ontoggle: PropTypes.func.isRequired,
    id : PropTypes.number.isRequired,
}

export default TaskCheckbox

This part was around 59:00 in the video if that helps.