React Styled Components – Как изменить цвет щелкнутого элемента в функции карты?

Я создаю кнопки из файла data.js с помощью функции map(), которая затем меняет содержимое страницы в зависимости от идентификатора, которому они соответствуют. Как я могу использовать стилизованные компоненты для изменения цвета фона выбранного в данный момент? Я хочу, чтобы все это по-прежнему основывалось на функции map()

Данные.js

technology: [
    {
      id: 1,
      name: "Launch vehicle",
      images: {
        portrait: "../assets/technology/image-launch-vehicle-portrait.jpg",
        landscape: require("../assets/technology/image-launch-vehicle-landscape.jpg"),
      },
      description:
        "A launch vehicle or carrier rocket is a rocket-propelled vehicle used to carry a payload from Earth's surface to space, usually to Earth orbit or beyond. Our WEB-X carrier rocket is the most powerful in operation. Standing 150 metres tall, it's quite an awe-inspiring sight on the launch pad!",
    },
    {
      id: 2,
      name: "Spaceport",
      images: {
        portrait: "../assets/technology/image-spaceport-portrait.jpg",
        landscape: require("../assets/technology/image-spaceport-landscape.jpg"),
      },
      description:
        "A spaceport or cosmodrome is a site for launching (or receiving) spacecraft, by analogy to the seaport for ships or airport for aircraft. Based in the famous Cape Canaveral, our spaceport is ideally situated to take advantage of the Earth’s rotation for launch.",
    },
    {
      id: 3,
      name: "Space capsule",
      images: {
        portrait: "../assets/technology/image-space-capsule-portrait.jpg",
        landscape: require("../assets/technology/image-space-capsule-landscape.jpg"),
      },
      description:
        "A space capsule is an often-crewed spacecraft that uses a blunt-body reentry capsule to reenter the Earth's atmosphere without wings. Our capsule is where you'll spend your time during the flight. It includes a space gym, cinema, and plenty of other activities to keep you entertained.",
    },
  ],

Технология.js

export const NumberCircle = styled.div`
  height: 50px;
  width: 50px;
  border: 1px solid white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: white;
`;


function Technology() {
  const [toggle, setToggle] = useState({
    id: 1,
    name: "",
    images: {
      landscape: "",
    },
    description: "",
  });

  return (
    <>
      <Wrapper>
        <Title>
          <p style = {{ marginRight: "10px", color: "grey", fontWeight: "bold" }}>
            03
          </p>
          <p>SPACE LAUNCH 101</p>
        </Title>

        <ImageContainer>
          <img src = {toggle.images.landscape} alt = "tech"></img>
        </ImageContainer>

        <CircleWrap>
          {data.technology.map((tech) => (
            <NumberCircle key = {tech.id} onClick = {() => setToggle(tech)}>
              {tech.id}
            </NumberCircle>
          ))}
        </CircleWrap>
      </Wrapper>
    </>
  );
}