When I add a subtask it is not added in realtime. I have to close and reopen the modal to show the added subtask. Please fix the bug, newly added subtask should be displayed in real time

```
// App
import React from 'react';
import TaskContainer from './components/TaskContainer';
import { TaskProvider } from './TaskContext';

function App() {
  return (
    <TaskProvider>
      <div className="container mx-auto p-6">
        <h1 className="mb-6 text-3xl font-bold">Task Logger</h1>
        <TaskContainer />
      </div>
    </TaskProvider>
  );
}

export default App;

//TaskContext

import React, { createContext, useEffect, useState } from 'react';

const TaskContext = createContext();

const TaskProvider = ({ children }) => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem('tasks'));
    if (storedTasks) {
      setTasks(storedTasks);
    }
  }, []);

  useEffect(() => {
   localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const deleteTask = (taskId) => {
    setTasks(tasks.filter((task) => task.id !== taskId));
  };

  const addSubtask = (taskId, subtask) => {
    const updatedTasks = tasks.map((task) => {
      if (task.id === taskId) {
        const updatedSubtasks = [...task.subtasks, subtask];
        return { ...task, subtasks: updatedSubtasks };
      }
      return task;
    });
    setTasks(updatedTasks);
  };

const updateSubtaskStatus = (taskId, subtaskId, status) => {
  const updatedTasks = tasks.map((task) => {
    if (task.id === taskId) {
      const updatedSubtasks = task.subtasks.map((subtask) => {
        if (subtask.id === subtaskId) {
          return { ...subtask, status };
        }
        return subtask;
      });
      return { ...task, subtasks: updatedSubtasks };
    }
    return task;
  });
  setTasks(updatedTasks);
};

  return (
    <TaskContext.Provider value={{ tasks, addTask, deleteTask, addSubtask, updateSubtaskStatus }}>
      {children}
    </TaskContext.Provider>
  );
};

export { TaskContext, TaskProvider }; 

// TaskContainer
import React, { useContext, useState } from 'react';
import TaskInput from './TaskInput';
import Task from './Task';
import SubtaskModal from './SubtaskModal';
import { TaskContext } from '../TaskContext';

function TaskContainer() {
  const { tasks, addTask, deleteTask, addSubtask } = useContext(TaskContext);
  const [showSubtaskModal, setShowSubtaskModal] = useState(false);
  const [selectedTask, setSelectedTask] = useState(null);

  const frontEndTasks = tasks.filter((task) => task.type === 'front-end');
  const backEndTasks = tasks.filter((task) => task.type === 'back-end');
  
  const handleShowSubtaskModal = (taskId) => {
    setSelectedTask(tasks.find((task) => task.id === taskId));
    setShowSubtaskModal(true);
  };

  const handleHideSubtaskModal = () => {
    setSelectedTask(null);
    setShowSubtaskModal(false);
  };

  return (
    <div>
      <TaskInput onAddTask={addTask} />
      <div className="flex justify-between">
        <div className="w-1/2 mr-4">
          <h2 className="mb-2 font-bold text-lg">Front-End Tasks</h2>
          {frontEndTasks.map((task) => (
            <Task
              key={task.id}
              task={task}
              onTaskDelete={deleteTask}
              onShowSubtaskModal={handleShowSubtaskModal}
            />
          ))}
        </div>
        <div className="w-1/2">
          <h2 className="mb-2 font-bold text-lg">Back-End Tasks</h2>
          {backEndTasks.map((task) => (
            <Task
              key={task.id}
              task={task}
              onTaskDelete={deleteTask}
              onShowSubtaskModal={handleShowSubtaskModal}
            />
          ))}
        </div>
      </div>
      {showSubtaskModal && (
        <SubtaskModal
          key={selectedTask.id} // helps React to identify when the component should be updated.
          task={selectedTask}
          onCloseModal={handleHideSubtaskModal}
          onAddSubtask={addSubtask}
        />
      )}
    </div>
  );
}

export default TaskContainer;

//TaskInput
import React from 'react';

function Task({ task, onTaskDelete, onShowSubtaskModal }) {
  const getProgressBarColor = (averageStatus) => {
    if (averageStatus === 100) {
      return 'bg-green-500';
    } else if (averageStatus >= 50) {
      return 'bg-yellow-500';
    } else {
      return 'bg-red-500';
    }
  };

  const handleDeleteClick = (event) => {
    event.stopPropagation(); // Add this line to stop event propagation
    onTaskDelete(task.id);
  };

  // Add this event handler to handle task click
  const handleTaskClick = () => {
    onShowSubtaskModal(task.id);
  };

  const subtaskStatuses = task.subtasks.map((subtask) => subtask.status);
  const averageStatus = subtaskStatuses.length > 0 ? Math.round(subtaskStatuses.reduce((a, b) => a + b) / subtaskStatuses.length) : 0;

  return (
    <div className="flex items-center justify-between mb-4" onClick={handleTaskClick}>
      <div className="flex items-center space-x-4">
        <div className="flex-shrink-0 w-4 h-4 rounded-full">
          <div className={getProgressBarColor(averageStatus)} style={{ width: `${averageStatus}%`, height: '100%' }}></div>
        </div>
        <p className="font-bold">{task.title}</p>
      </div>
      <button onClick={handleDeleteClick} className="px-2 py-1 text-sm text-red-500 underline">
        Delete
      </button>
    </div>
  );
}

export default Task;

//Task
import React from 'react';

function Task({ task, onTaskDelete, onShowSubtaskModal }) {
  const getProgressBarColor = (averageStatus) => {
    if (averageStatus === 100) {
      return 'bg-green-500';
    } else if (averageStatus >= 50) {
      return 'bg-yellow-500';
    } else {
      return 'bg-red-500';
    }
  };

  const handleDeleteClick = () => {
    onTaskDelete(task.id);
  };

  // Add this event handler to handle task click
  const handleTaskClick = () => {
    onShowSubtaskModal(task.id);
  };

  const subtaskStatuses = task.subtasks.map((subtask) => subtask.status);
  const averageStatus = subtaskStatuses.length > 0 ? Math.round(subtaskStatuses.reduce((a, b) => a + b) / subtaskStatuses.length) : 0;

  return (
    <div className="flex items-center justify-between mb-4" onClick={handleTaskClick}>
      <div className="flex items-center space-x-4">
        <div className="flex-shrink-0 w-4 h-4 rounded-full">
          <div className={getProgressBarColor(averageStatus)} style={{ width: `${averageStatus}%`, height: '100%' }}></div>
        </div>
        <p className="font-bold">{task.title}</p>
      </div>
      <button onClick={handleDeleteClick} className="px-2 py-1 text-sm text-red-500 underline">
        Delete
      </button>
    </div>
  );
}

export default Task;

//SubtaskModal
import React, { useContext, useState } from "react"; // import useState here
import Subtask from "./Subtask";
import TaskInput from "./TaskInput";
import { TaskContext } from "../TaskContext";

function SubtaskModal({ task, onCloseModal, onAddSubtask }) {
	const { addSubtask, updateSubtaskStatus } = useContext(TaskContext);
    const [subtaskTitle, setSubtaskTitle] = useState(""); // Add this line to define subtaskTitle as state

	const handleTitleChange = (event) => {
		setSubtaskTitle(event.target.value);
	};

	const handleAddSubtask = () => {
		if (subtaskTitle) {
			const newSubtask = {
				id: Date.now(),
				title: subtaskTitle,
				status: 0,
			};
			onAddSubtask(task.id, newSubtask);
			setSubtaskTitle("");
		}
	};

	return (
		<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center">
			<div className="absolute top-0 left-0 w-full h-full bg-gray-900 opacity-75"></div>
			<div className="z-10 w-full max-w-md p-6 mx-auto bg-white rounded-md shadow-lg">
				<div className="flex items-center justify-between mb-4">
					<h2 className="font-bold text-lg">{task.title}</h2>
					<button
						onClick={onCloseModal}
						className="px-2 py-1 text-sm font-medium text-gray-500 hover:text-gray-800"
					>
						Close
					</button>
				</div>
				<div className="mb-4">
					{task.subtasks.map((subtask) => (
						<Subtask
							key={subtask.id}
							taskId={task.id}
							subtask={subtask}
						/>
					))}
				</div>
				<div className="flex items-center space-x-4">
					<input
						type="text"
						placeholder="Enter subtask title"
						value={subtaskTitle}
						onChange={handleTitleChange}
						className="w-2/3 px-3 py-2 border border-gray-400 rounded-md"
					/>
					<button
						onClick={handleAddSubtask}
						className="px-4 py-2 bg-blue-500 text-white rounded-md"
					>
						Add
					</button>
				</div>
			</div>
		</div>
	);
}

export default SubtaskModal;



//Subtask
import React, { useContext } from 'react';
import { TaskContext } from '../TaskContext';

function Subtask({ taskId, subtask }) {
  const { updateSubtaskStatus } = useContext(TaskContext);

  const handleStatusChange = (event) => {
    const newStatus = event.target.checked ? 100 : 0;
    updateSubtaskStatus(taskId, subtask.id, newStatus);
  };

  return (
    <div className="flex items-center justify-between mb-2">
      <div className="flex items-center space-x-2">
        <input
          type="checkbox"
          checked={subtask.status === 100}
          onChange={handleStatusChange}
          className="w-4 h-4 border border-gray-400 rounded-sm"
        />
        <p>{subtask.title}</p>
      </div>
      <div className="flex-shrink-0 w-4 h-4 rounded-full">
        <div className="bg-gray-400" style={{ width: `${subtask.status}%`, height: '100%' }}></div>
      </div>
    </div>
  );
}

export default Subtask;
```