Javascript React.js：单击列表中的项目时如何更改图标

我试图实现一种逻辑，根据点击的项目，arrow down个图标变为arrow-up，如果用户第二次点击同一行，则应该再次更改
我try 根据单击项目的索引触发它，但无法正常工作

const handleClick = () => {
    setOpen(!open);
  };

但这种方法会更改状态中所有图标的状态.

这是代码和sandbox link.

import React, { useState } from "react";
import { ListGroup } from "react-bootstrap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAngleUp, faAngleDown } from "@fortawesome/free-solid-svg-icons";

export const defaultListData = [
  {
    name: "Dapibus ac facilisis in"
  },
  {
    name: "Morbi leo risus"
  },
  {
    name: "Porta ac consectetur ac"
  },
  {
    name: "Porta ac doesfvsaard  asdas"
  }
];

function UserSettings() {
  const [open, setOpen] = useState(false);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const handleClick = () => {
    setOpen(!open);
  };

  function handleTests(index) {
    setSelectedIndex(index);
  }

  return (
    <div>
      {defaultListData.map((category, i) => (
        <ListGroup key={category.name} variant="flush">
          <ListGroup.Item
            onClick={(e) => handleTests(i)}
            style={{ display: "flex", gap: "50px" }}
          >
            {category.name}

            <FontAwesomeIcon
              style={{ color: "green", cursor: "pointer" }}
              icon={selectedIndex === i ? faAngleDown : faAngleUp}
            />
          </ListGroup.Item>
        </ListGroup>
      ))}
    </div>
  );
}

export default UserSettings;

任何帮助都将不胜感激