Appropriate Use of Modals - Attach to mapped components or pass modal logic down?

const ToDoComponent = ({ todo }) => {
  // logic for modal here
  return (
    <div>
      {todo}
      <ModalThatDoesSomething />
    </div>
  );
};

const Page = () => {
  const todos = [todo1, todo2, todo3, ...];

  return <div>
    {todos.map((todo) => (
      <ToDoComponent todo={todo} />
    )}
  </div>;
};

export default Page;

const ToDoComponent = ({ todo, modalLogic }) => {
  // modal logic is triggered and passed up to parent
  return (
    <div>
      {todo}
    </div>
  );
};

const Page = () => {
  const todos = [todo1, todo2, todo3, ...];
  // MODAL LOGIC HERE


  return <div>
    {todos.map((todo) => (
      <ToDoComponent todo={todo} modalLogic={modalLogic} />
    )}

    <ModalThatDoesSomething />
  </div>;
};

export default Page;