Handling Checkboxes in React

I have a component that I am writing that handles the days and hours of the week.The main component that passes in a state of time to the sub component "UpdateHours" passes in the days of the week in an object, all the days are set to a default of true. So all the Check boxes are all checked by default. When I click on the day, the object is updated to false on my console but the check box remains checked even when the value is set to false. A curious part, when I click my button on the page that updates the backend the boxes I checked false become unchecked.

// The object being passed through from the parent component

function handleAddNewHour() {
    var uid = generateUUID();
    var newHour = {
      mon: true,
      tue: true,
      wed: true,
      thu: true,
      fri: true,
      sat: true,
      sun: true,
      start: 0,
      end: 0,
      service_type: "all",
      id: uid
    };

    setTime(newHour);
  }



 {time != null ? (<UpdateHour time={time} setTimeChange={handleTimeUpdate}/>) : (  "" )}

// The element on UpdateHours.js

 <div className="newHoursDay" onClick={() => handleDayChange("mon")}>
            <input
              type="checkbox"
              name="new_hours_mon"
              checked={props.time.mon}
              value={props.time.mon}
              onChange={() => handleDayChange("mon")}
            />
            <label>Mon</label>
          </div>

// Here are the functions

  function handleDayChange(day) {
    let hourData = props.time;
    hourData[day] = !props.time[day];
    props.setTimeChange(hourData);

  }

  function handleServiceChange(serviceType) {
    props.time[serviceType] = serviceTypes;
    setState({});
  }

//This function calls my function that updates the firestore database with the new object

function handleSave() {
    var hoursData = {
      hours: {}
    };
    if (typeof store.hours !== "undefined") {
      hoursData.hours = store.hours;
    }
    hoursData.hours[props.time.id] = {};
    Object.keys(props.time).forEach(prop => {
      if (prop === "id") {
        hoursData.hours[props.time.id][prop] = props.time[prop];
      }
    });
    changeStoreData(hoursData);

    //updatestore
  }