Javascript 通过跳过某些元素的对象进行映射

想知道如何在JSX中的任何位置显示分隔符？例如，我有以下列表，它在单击项目时显示文本:

代码如下:

<Accordion>
  {items.map((item, index) => (
    <AccordionItem key={item.id} item={item} index={index} />
  ))}
</Accordion>

有一个像这样的对象声明列表的内容:

const items = [
    { label: "One", content: "lorem ipsum for more, see https://one.com" },
    { label: "Two", content: "lorem ipsum for more, see https://two.com" },
    {
      label: "Three",
      content: "lorem ipsum for more, see https://three.com",
    },
  ];

Now, I'd like to add a separator after the label "Two" to get something like this:

如果我们try 以下方法，我将激活索引0中的元素和索引2中的元素:

<Accordion>
  {items.slice(0, 2).map((item, index) => (
    <AccordionItem key={item.id} item={item} index={index} />
  ))}
  <hr />
  {items.slice(2).map((item, index) => (
    <AccordionItem key={item.id} item={item} index={index} />
  ))}
</Accordion>

Then, getting this incorrect result:

为什么会发生这样的事情？因为我的手风琴对象如下:

import { useState, createContext } from "react";

export const AccordionContext = createContext({
  activeItemIndex: 0,
  setActiveItemIndex: () => 0,
});

export const Accordion = (props) => {
  const [activeItemIndex, setActiveItemIndex] = useState(0);

  return (
    <AccordionContext.Provider value={{ activeItemIndex, setActiveItemIndex }}>
      <ul>{props.children}</ul>
    </AccordionContext.Provider>
  );
};

开始时activeItemIndex是0，因此当应用Slice(2)时，第一个元素也是索引0(但是该元素位于索引2).

如何才能使行紧跟在列表中的第二个元素之后？

非常感谢