How to change state of multiple React children?

Down below is <SidebarOption /> and <SideBarConatiners /> these are both items that have a state called open to highlight them whenever they have been clicked and they are inside the <SidebarItemList />

       <SideBarItemList>
        <SidebarOption id="1" name="Startsida: Fjärrvärmenät" />
        <SidebarOption id="2" name="Startsida: Användare" />
        <SideBarContainers id="3" name="Allmänt" 
        options={[
            "Senaste uppdaterad", "Visa Pluginmoduler", "Öppna Arkivet", "Personliga inställningar", 
            "Regionala inställningar", "Om Driftportalen"
            ]}/>
        <SideBarContainers id="4" name="Planering" notPressAble={[0, 6, 11]}
        options={[
            "Aktiviteter:", "+ Ny Aktivitet", "Visa Alla Öppna", "Visa Försenat", "Visa Alla Stängda", "Visa Alla Kategoriserat",
            "Att göra:", "+ Ny Att göra", "Visa Alla Öppna", "Visa Alla Stängda", "Visa Alla Kategoriserat", 
            "Personal planering:", "+ Ny post", "Visa Alla enkel"
        ]} />
        </SideBarItemList>

Down below is the <SideBarItemList /> class, i want to change the open value of the items soo that if one item is higlighted and another item is pressed i want all the other items to set the state open to false so that only one item state open can be set to true the problem is that the items state open does not seem to be extensible what can i do about this?

my error: Cannot add property open, object is not extensible

import { Component } from "react";

class SideBarItemList extends Component{
    constructor(props){
        super(props);
        this.state ={
            sidebarItems: null
        };
    }

    static getDerivedStateFromProps(props, state){
        return{
            sidebarItems: props.children
        };
    }

    handleItems = () => {
        let openNumber = null;
        for(let x = 0; x < this.state.sidebarItems.length; x++)
        {
            if(this.state.sidebarItems[x].open = true)
            {
                openNumber = x;
            }
            this.state.sidebarItems[x].open = false;
        }

        this.state.sidebarItems[openNumber].open = true;
    }

    render(){
        return(
            <div onClick={this.handleItems}>
                {this.state.sidebarItems}
            </div>
        )
    }
}

export default SideBarItemList;

Script below of <SideBarConatiners /> added to hopefully clarify

import React, {Component} from "react";
import classes from "../../layout/Sidebar.module.css"
import { Link } from "react-router-dom";

class SidebarOption extends Component{
    constructor(props){
        super(props);
        this.state = {
            open: false,
            
        }
    }

    setOpen = () => {
        this.setState(prevState => {
            return {
                open: !prevState.open
            }
        })
    }

    setStates = () => {
        this.setOpen()
    }



    render(){
        return (
        <div>
            <Link to={this.props.link}>
                <button
                className={this.state.open ? classes.dropdownbtnopen: classes.dropdownbtn} 
                onClick={this.setStates}>{this.props.name}
                </button>
            </Link>
        </div>
        )
    }
}

export default SidebarOption;

You can add or override prop values for children with cloneElement(element, props) doc.

You would need to change your implementation of SideBarItemList to track in local state which child element is selected, and whenever the state changes you would re-render and provide isSelected: true to the one selected child element and isSelected: false (or nothing) to all others.

An alternative (I don't recommend here) is to implement all children in such a way as to offer an imperative interface (via forwardRef and useImperativeHandle) that would allow a method call like child_37.collapse() and child_03.expand().

Your implementation could look like this:

export const SideBarItemList = ({ children }) => {
  const [selected, setSelected] = useState();

  return (
    <ul>
    {
      React.Children.map(children, (child, index) => (
        <li onClick={() => setSelected(index)}>
          {React.cloneElement(child, { isOpen: index === selected })}
        </li>
      ))
    }
    </ul>
  );
};