I want to apply delete all functionality . and also want to apply individual delete functionality i am working on react

import React, { useState } from "react";
import classes from "./ScrrenShotCard.module.css";
import ScreenShotCard from "./ScreenShotCard";

const hoursWithIntervals = [
  {
    hour: "9:00am -10:00am",
    id: 1,
    checked: false,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "9:00am -9:10 am",
      "9:10am - 9:20 am ",
      "9:20am - 9:30 am",
      "9:30am - 9:40am",
      "9:40am-9:50 am",
      "9:50am-10:00 am ",
    ],
  },

  {
    hour: "10:00am -11:00am",
    checked: false,
    id: 2,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "10:00am - 10:10 am",
      "10:10am - 10:20 am",
      "10:20am -10:30 am",
      "10:30am -10:40 am",
      "10:40am- 10:50 am",
      "10:50am- 11:00 am",
    ],
  },

  {
    hour: "11:00am -12:00pm",
    checked: false,
    id: 3,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "11:00am-11:10am",
      "11:10am-11:20am",
      "11:20am-11:30am",
      "11:30am-11:40am",
      "11:40am-11:50am",
      "11:50am-12:00pm",
    ],
  },

  {
    hour: "12:00pm - 1:00 pm",
    id: 4,
    checked: false,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "12:00pm-12:10pm",
      "12:10pm-12:20pm",
      "12:20pm-12:30pm",
      "12:30pm-12:40pm",
      "12:40pm-12:50pm",
      "12:50pm-1:00pm",
    ],
  },

  {
    hour: "1:00pm - 2:00 pm",
    checked: false,
    id: 5,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "1:00pm-1:10pm",
      "1:10pm-1:20pm",
      "1:20pm-1:30pm",
      "1:30pm-1:40pm",
      "1:40pm-1:50pm",
      "1:50pm-2:00pm",
    ],
  },

  {
    hour: "2:00pm - 3:00 pm",
    checked: false,
    id: 6,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "2:00pm-2:10pm",
      "2:10pm-2:20pm",
      "2:20pm-2:30pm",
      "2:30pm-2:40pm",
      "2:40pm-2:50pm",
      "2:50pm-3:00pm",
    ],
  },

  {
    hour: "3:00pm - 4:00 pm",
    checked: false,
    id: 7,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "3:00pm-3:10pm",
      "3:10pm-3:20pm",
      "3:20pm-3:30pm",
      "3:30pm-3:40pm",
      "3:40pm-3:50pm",
      "3:50pm-4:00pm",
    ],
  },

  {
    hour: "4:00pm - 5:00 pm",
    checked: false,
    id: 8,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "4:00pm-4:10pm",
      "4:10pm-4:20pm",
      "4:20pm-4:30pm",
      "4:30pm-4:40pm",
      "4:40pm-4:50pm",
      "4:50pm-5:00pm",
    ],
  },

  {
    hour: "5:00pm - 6:00 pm",
    id: 9,
    checked: false,
    totaltimeworked: "total time worked : 1:00:00",
    intervals: [
      "5:0pm-5:10pm",
      "5:10pm-5:20pm",
      "5:20pm-5:30pm",
      "5:30pm-5:40pm",
      "5:40pm-5:50pm",
      "5:50pm-6:00pm",
    ],
  },
];

const ScreenShotTimeInterval = () => {
  const [isScreenSelected, setIsScreenSelected] = useState(
    Array(hoursWithIntervals.length * 6).fill(false)
  );

  const [parentHourSelected, setParentHourSelected] = useState(
    Array(hoursWithIntervals.length).fill(false)
  );

  const isAllIntervalsSelected = (hourIndex) => {
    const startingIndex = hourIndex * 6;
    const endIndex = startingIndex + 6;
    for (let i = startingIndex; i < endIndex; i++) {
      if (!isScreenSelected[i]) {
        return false;
      }
    }
    return true;
  };

  const handleParentCheckboxChange = (e, hourIndex) => {
    const checked = e.target.checked;

    const updatedScreenSelected = [...isScreenSelected];
    const startingIndex = hourIndex * 6;
    for (let i = startingIndex; i < startingIndex + 6; i++) {
      updatedScreenSelected[i] = checked;
    }

    setIsScreenSelected(updatedScreenSelected);
    const updatedParentSelected = [...parentHourSelected];
    updatedParentSelected[hourIndex] = checked;
    setParentHourSelected(updatedParentSelected);
  };
  const handleIntervalCheckboxChange = (hourIndex, intervalIndex, checked) => {
    setIsScreenSelected((prev) => {
      const updated = [...prev];
      updated[hourIndex * 6 + intervalIndex] = checked;
      const allIntervalsSelected = isAllIntervalsSelected(hourIndex);

      const updatedParentSelected = [...parentHourSelected];
      updatedParentSelected[hourIndex] = allIntervalsSelected;
      setParentHourSelected(updatedParentSelected);

      return updated;
    });
  };

  return (
    <>
      {hoursWithIntervals.map((hourData, hourIndex) => (
        <div key={hourIndex}>
          <div className={classes.various_point_of_seen_screenshot}>
            <input
              className={classes.user_can_select_when_hover}
              type="checkbox"
              id={`hour _ ${hourData.id}`}
              onChange={(e) => handleParentCheckboxChange(e, hourIndex)}
              checked={parentHourSelected[hourIndex]}
            />

            <h4>{hourData.hour} </h4>
            <h5>{hourData.totaltimeworked} </h5>
          </div>
          <div className={classes.various_time_interval_screen_shot}>
            {hourData.intervals.map((interval, intervalIndex) => (
              <div
                key={intervalIndex}
                className={classes.various_projects_where_you_can_see}
              >
                <label className={classes.interval_based_on_hour}>IT</label>
                <div className={classes.list_of_to_dos}>
                  <label className={classes.not_to_do}>No-to-dos</label>
                  <ScreenShotCard
                    key={intervalIndex}
                    timeInterval={interval}
                    onChange={(isChecked) =>
                      handleIntervalCheckboxChange(
                        hourIndex,
                        intervalIndex,
                        isChecked
                      )
                    }
                    checked={isScreenSelected[hourIndex * 6 + intervalIndex]}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      ))}
      ;
    </>
  );
};

export default ScreenShotTimeInterval;
  this is parent  component and  this is child component import React, { useContext, useState, useEffect } from "react";
import classes from "./ScrrenShotCard.module.css";
import userImage from "../../images/screenshot.png";
import { BsPencil } from "react-icons/bs";
import { RiContactsBookLine, RiDeleteBin6Line } from "react-icons/ri";
import { TbPhotoX } from "react-icons/tb";
import { SelectedScreenContext } from "../../Store/SelectedScreenContext";

const ScreenShotCard = ({ checked, allIntervalsSelected, onChange }) => {
  const handleCheckboxChange = (e) => {
    if (!allIntervalsSelected) {
      onChange(e.target.checked);
    }
  };
  const { handleViewButton } = useContext(SelectedScreenContext);

  const handleImageClick = () => {
    handleViewButton();
  };

  return (
    <div className={classes.userScreen}>
      <div className={classes.functionality_of_button}>
        <img
          className={classes.user_screen_image}
          src={userImage}
          alt="user Screen"
        />
        <button className={classes.functionality_to_see_screen}>
          3 screens
        </button>
        <div className={classes.various_information_when_hover_it}>
          <div className={classes.various_screen_can_delete}>
            <div>
              <input
                className={classes.user_can_select_when_hover}
                type="checkbox"
                id="customCheckbox"
                onChange={handleCheckboxChange}
                checked={checked}
                disabled={allIntervalsSelected}
              />
            </div>
            <div className={classes.various_icon_clicked_for_action}>
              <TbPhotoX className={classes.photo_can_be_cancel} />
              <RiDeleteBin6Line className={classes.screen_delete_icon} />
            </div>
          </div>
          <div>
            <button
              className={classes.press_button_to_view_screen}
              onClick={handleImageClick}
            >
              View screen
            </button>
          </div>
        </div>
      </div>

      <div className={classes.various_information_of_time_interval}>
        <div className={classes.various_time_section_for_screenshot}>
          <label>2:00 pm - 2:10pm</label>
          <div>
            <span>
              <BsPencil />
            </span>
          </div>
        </div>
        <div className={classes.progress_bar}>
          <div className={classes.sub_section_of_progress_bar}></div>
        </div>
        <div>
          <p> 7% of 9 minutes</p>
        </div>
      </div>
    </div>
  );
};

export default ScreenShotCard;
here i am facing some issue

Please say more. That’s a lot of code, so we need to know more details about the issue

actually i make a parent component where i have hours and each hour have some intervals . and each interval have its own input i want that if user select hour input then it’s child input must be selected and if not then interval hour is also works.