How to change the value of all the objects inside the expect except the one which is clicked in React js?

I am mapping the objects of an array and making them tabs, and what I want to achieve is when one tab is clicked, it should change the property of that tab and all other tabs.

Here is the sandbox example: https://vnlrf.csb.app/

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const attributeValue = [
    { theValue: "theValue 1", selected: "false" },
    { theValue: "theValue 2", selected: "false" },
    { theValue: "theValue 3", selected: "false" },
    { theValue: "theValue 4", selected: "false" },
    { theValue: "theValue 5", selected: "false" }
  ];
  return (
    <div>
      {attributeValue.map((obj, index) => {
        return (
          <TestingTabs
            theValue={obj.theValue}
            theIndex={index}
            theSelected={obj.selected}
            entireArray={attributeValue}
          ></TestingTabs>
        );
      })}
    </div>
  );
  function TestingTabs({ theValue, theSelected, theIndex, entireArray }) {
    const [theSelectedValue, setTheSelectedValue] = useState(theSelected);

    const changeOtherToFalse = () => {
      entireArray.map((obj, index) => {
        if (index === theIndex) {
        } else {
          obj.selected = false;
        }
      });
    };
    return (
      <div
        className={`customer__account__tabs ${
          theSelectedValue === "true" && "active_btn"
        }`}
        onClick={() => {
          if (theSelectedValue === "true") {
          } else {
            setTheSelectedValue("true");
            changeOtherToFalse();
          }
        }}
      >
        <div className="customer__account__tabs__title">{theValue}</div>

        <div>{theSelectedValue}</div>
      </div>
    );
  }
}

here suppose when the first tab will be clicked, the selected value of that should be true and all
the other tabs should be false, but that does not happen. What happens is when one tab is
clicked it becomes true and it does not make another tabs false

>Solution :

The state needs to be updated properly from the child. As the values are unique, you can use that as key and also for determining which tab needs to be set to true.

function Tab({ tab, setTabs }) {
  return (
    <div
      className={`customer__account__tabs ${tab.selected && "active_btn"}`}
      onClick={() => {
        setTabs((prevTabs) =>
          prevTabs.map((prevTab) =>
            prevTab.value === tab.value
              ? { ...prevTab, selected: true }
              : { ...prevTab, selected: false }
          )
        );
      }}
    >
      <div className="customer__account__tabs__title">{tab.value}</div>
      <div>{tab.selected.toString()}</div>
    </div>
  );
}
const initialState = [
  { value: "theValue 1", selected: false },
  { value: "theValue 2", selected: false },
  { value: "theValue 3", selected: false },
  { value: "theValue 4", selected: false },
  { value: "theValue 5", selected: false }
];

export default function App() {
  const [tabs, setTabs] = useState(initialState);

  return (
    <div>
      {tabs.map((tab) => {
        return <Tab key={tab.value} tab={tab} setTabs={setTabs} />;
      })}
    </div>
  );
}