Node.js 我的 MERN 网站一直告诉我我的一个函数不是一个函数

我正在创建一个MERN TODO应用程序，允许用户添加、编辑和删除TODO列表项.我已经创建了一个模式表单，当用户单击其待办事项上的更新按钮时将显示该表单.我目前只想让我的函数(UpdateNewToDo)工作，该函数从子元素获取所有信息以更新数据库.它似乎在最后一秒失败了，我不明白为什么.任何建议都将不胜感激. 当我按下模式中的更新按钮时，我收到的错误是:

Pros.updateNewToDo不是函数

TypeError: Pros.updateNewToDo不是函数

Home.js
import React, { useEffect, useState } from 'react'

import ToDoList from '../components/ToDoList';

const Home = () => {
    const [toDos, setToDos] = useState(null);

    useEffect(() => {
        const fetchToDos = async () => {
          const response = await fetch("/api/ToDo");
          const json = await response.json();

          if (response.ok) {
            setToDos(json);
          }
        };
        fetchToDos();
      }, []);

  //This is a function that will get the todo item that needs to be updated in the child components
      function updateNewToDo(id, Name){
        console.log("update the employee")
      }

  return (
    <div className='Home'>
        <div className='toDos'>
            {toDos && toDos.map((toDo) => <ToDoList key={toDo._id} props={toDo} id={toDo._id} updateNewToDo={updateNewToDo} />)}
        </div>
    </div>
  )
}

export default Home

ToDoList.js
import React from "react";
import EditToDo from "./EditToDo";

const ToDoList = ( {props} ) => {
  return (
    <div className="toDoList">
      <h4>To Do: </h4>
      <p>{props.Name}</p>
      <span>delete</span>
      <EditToDo Name={props.Name} updateNewToDo={props.updateNewToDo} id={props._id} />
    </div>
  );
};

export default ToDoList;

EditToDo.js
import { useState } from "react";
import Button from "react-bootstrap/Button";
import Modal from "react-bootstrap/Modal";

function EditToDo(props) {
  const [Name, setName] = useState(props.Name);
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Update
      </Button>

      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>Update To Do</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              console.log('Hello from EditToDo');
              console.log(props.id, Name)
              props.updateNewToDo(props._id, Name);
            }}
            id="editModal"
            className="w-full max-w-sm"
          >
            <div className="md:flex md:items-center mb-6">
              <div className="md:w-1/3">
                <label
                  className="block text-gray-500 font-bold md:text-right mb-1 md:mb-0 pr-4"
                  for="name"
                >
                  To Do
                </label>
              </div>
              <div className="md:w-2/3">
                <input
                  className="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500"
                  id="name"
                  type="text"
                  value={Name}
                  onChange={(e) => {
                    setName(e.target.value);
                  }}
                />
              </div>
            </div>
          </form>
        </Modal.Body>
        <Modal.Footer>
          <button
            onClick={handleClose}
            className="bg-slate-400 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
          >
            Close
          </button>

          <button
            form="editModal"
            className="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded"
          >
            Update
          </button>


        </Modal.Footer>
      </Modal>
    </>
  );
}

export default EditToDo;