Mark shift clock interference for each user

Question

I have several users who have different shifts And each user can have multiple shifts per day. For each user. If the shift hours were equal. Or if two shifts interfere with the clock. The color of the shifts should be red for the user to notice

let tbody = document.getElementById("tbody");
const toDate = (str) => {
  const [dateStr, t] = str.split(" ");
  const [h, m] = t.split(":");
  const date = new Date(dateStr);
  date.setHours(h);
  date.setMinutes(m);
  return date.getTime();
};
function loadShits(shifts) {
  let shiftMap = {};
  let overlapIds = new Set();

  shifts.forEach((shift) => {
    if (!shiftMap[shift.ownerId["id"]])
      shiftMap[shift.ownerId["id"]] = [
        [toDate(shift.startTime), toDate(shift.endTime)],
      ];
    else {
      const sTime = toDate(shift.startTime);
      const eTime = toDate(shift.endTime);
      const overlap = shiftMap[shift.ownerId["id"]].some(([osTime, oeTime]) => {
        return (
          (sTime > osTime && sTime < oeTime) ||
          (eTime > osTime && eTime < oeTime)
        );
      });
      shiftMap[shift.ownerId["id"]].push([sTime, eTime]);
      if (overlap) overlapIds.add(shift.ownerId["id"]);
      shift.overlap = overlap
    }
  });

console.log(overlapIds);
// console.log(shiftMap);

  shifts.forEach((shift) => {
    let endTime = shift["endTime"];
    let startTime = shift["startTime"];
    let ownerId = shift["ownerId"].id;
    let tr = document.createElement("tr");
    let id = document.createElement("th");
    let dateStart = document.createElement("th");
    let timeStart = document.createElement("th");
    let dateEnd = document.createElement("th");
    let timeEnd = document.createElement("th");

    id.innerHTML = ownerId;
    dateStart.innerHTML = startTime.substring(0, 10);
    timeStart.innerHTML = startTime.substring(11, 16);
    dateEnd.innerHTML = endTime.substring(0, 10);
    timeEnd.innerHTML = endTime.substring(11, 16);
    if (overlapIds.has(shift.ownerId.id)) tr.style.background = "red";

    // comment above and uncomment below, to highlight only second occurance
    // if (shift.overlap) tr.style.background = "red";
    
    tr.appendChild(id);
    tr.appendChild(dateStart);
    tr.appendChild(timeStart);
    tr.appendChild(dateEnd);
    tr.appendChild(timeEnd);

    tbody.appendChild(tr);
  });
}

let shifts = [
  {"@id":"shift/1","startTime":"2020-05-05 01:27","endTime":"2020-05-05 03:30","ownerId":{"@id":"users/3","id":3}},
  {"@id":"shift/3","startTime":"2020-05-05 02:10","endTime":"2020-05-05 04:27","ownerId":{"@id":"users/3","id":3}},
  {"@id":"shift/7","startTime":"2020-05-04 13:24","endTime":"2020-05-04 14:24","ownerId":{"@id":"users/2","id":2}},
  {"@id":"shift/5","startTime":"2020-05-07 05:50","endTime":"2020-05-07 7:40","ownerId":{"@id":"users/1","id":1}},
  {"@id":"shift/4","startTime":"2020-05-07 09:04","endTime":"2020-05-07 10:04","ownerId":{"@id":"users/4","id":4}},
  {"@id":"shift/6","startTime":"2020-05-07 06:40","endTime":"2020-05-07 08:10","ownerId":{"@id":"users/1","id":1}},
  {"@id":"shift/6","startTime":"2020-05-09 06:40","endTime":"2020-05-09 08:10","ownerId":{"@id":"users/1","id":1}},
  {"@id":"shift/7","startTime":"2020-05-06 09:40","endTime":"2020-05-06 10:10","ownerId":{"@id":"users/3","id":3}}
]

loadShits(shifts);

    <table class="table">
        <thead>
          <tr>
            <th scope="col">owner id</th>
            <th scope="col">date start</th>
            <th scope="col">time start</th>
            <th scope="col">date end</th>
            <th scope="col">time end</th>
          </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
    </table>

Hi guys I created the code. But there is a problem. And that's it. I want the sheifs to overlap in one date. Their background turns red. But in my code. If two shifts of a user overlap. All shifts make the user red. While should. Make this change based on the shift date

I want shifts that overlap in one date. Become red. Not all user shifts. But here all user shifts turn red