Arrays 更改处于反应状态的数组中的值

其思想是，当用户单击一个建筑（标记）时，它通过叠加模式显示信息，并向名为totalXP的变量添加点。我想检查用户是否已单击已使用if语句的标记。我以为我有它，但它从不触发else块，这意味着单击的值可能永远不会变为true，或者变回false。我不确定如何将单击的值永久更改为true？我认为它与可变对象有关，是一种反应物？？？ 控制台日志记录在

//MY ARRAY AND STATE
  const [visibleBuilding, setVisibleBuilding] = useState(0);
  const buildings = [
    {
      name: "Building 1",
      description:
        " Information1 ",
      xp: 25,
      clicked: false,
    },
    {
      name: "Building 2",
      description:
        "Information 1",
      xp: 30,
      clicked: false,
    },
  ];

//我要添加点并将其更改为TRUE的函数
const[totalXP，setTotalXP]=useState（0）；
const handleXP=函数（点）{
如果（建筑物[visibleBuilding]。单击===false）{
//console.log（建筑物[visibleBuilding]。单击）；
//MY FUNCTION TO ADD POINTS AND CHANGE CLICKED TO TRUE

  const [totalXP, setTotalXP] = useState(0);

  const handleXP = function (points) {
    if (buildings[visibleBuilding].clicked === false) {
      // console.log(buildings[visibleBuilding].clicked);<---shows false??
      let totalPoints = totalXP;
      totalPoints += points;
      setTotalXP(totalPoints);
      buildings[visibleBuilding].clicked = true;<----Need this to work?
      // console.log(buildings[visibleBuilding].clicked);<---shows true??

    } else {
      alert("You already got your xp homie");
    }
  };

//THE RENDERING STUFF
return(
     <OverlayBox
          building={buildings[visibleBuilding]}
          onPress={() => toggleOverlay()}
          key={visibleBuilding}
          title={buildings[visibleBuilding].name}
          info={buildings[visibleBuilding].description}
          xp={buildings[visibleBuilding].xp}
        />
     <Text>Total XP: {totalXP} </Text>
     <Marker
          onPress={() => {
            toggleOverlay();
            setVisibleBuilding(0);
            handleXP(buildings[visibleBuilding].xp);
          }}
          coordinate={{ latitude: 34.0198536, longitude: -80.923467 }}
          pinColor="maroon"
          title={"Rutledge Building"}
          description={"25 XP"}
        />
        

)