Javascript 仅当两个数组匹配索引和名称时才将类应用于元素

我有一个可能的时隙数组，通过映射呈现为p标记

{times.map((time, i) => (
    <p
      onClick={() => chooseTime(time, name)}
      className={`tc pa2 dib pointer ${colorClass(i)}`}
    >
      {time. dateUTCString}
    </p>
))}

我还有一个状态，它是一个固定数组，包含一个公司名称或null，当我单击一个时隙时，它会更新，如果我单击了时隙2，而我在公司2中，它会将该公司的名称添加到索引2中，因此它会匹配该时隙，类似这样：

   "times": [
      {
        "timestamp": 1474607824073,
        "dateUTCString": "Sat Sep 03 2016 19:01:09 GMT+0000 (UTC)",
      },
      {
        "timestamp": 1389120349942,
        "dateUTCString": "Mon Aug 19 2019 05:43:14 GMT+0000 (UTC)",
      },
    etc...

[
null,
company2,
null,
null,
etc...
]

timeslots元素有一个类，它是一个确定类值应该是什么的函数，我将元素所持有的索引传递给该类函数，因为它通过映射timeslots数组进行渲染

  const colorClass = (indexOfSelectedSlot) => {
    let color = 'black'
    selectedCompanies.forEach((companyName, id) => {
      if (indexOfSelectedSlot === id) {
      color = 'gray'
        if (name === companyName) {
          color = 'red'
        }
      }
    })
    return color
  }

以下是codesanbox中的完整代码：

所以我想要实现的是：

如果单击公司1上的第一个时隙，我希望第一个时隙为红色，其他公司上的第一个时隙为灰色（因为一个人不能同时在两个地方）

并将其余的时间段保留为默认的黑色

但是现在，如果我按下一个时隙，它会变成红色，但所有其他的时隙都会变成灰色

你知道怎么解决这个问题吗

---

这是代码沙盒：

companyPanel.js中有以下代码

  const colorClass = indexOfSelectedSlot => {
    let color = "black";
    selectedCompanies.forEach((companyName, id) => {
      if (indexOfSelectedSlot === id) {
        color = "gray";
        if (name === companyName) {
          color = "red";
        }
      }
    });
    return color;
  };

---

更改

color=“gray”
到color=“black”
单击后保持文本为黑色
 这只会使Begging中的所有内容变为灰色，我希望它们在Begging中变为黑色，如果是单击的，则变为红色，如果它们是同一时间段但在另一家公司，则变为灰色（例如，如果看到codesandbox，则变为水平）