通过其同级触发状态更改时，子组件不会重新呈现

有两个子组件（L1和L2）。两者都渲染文本和一个按钮。当按下L1中的按钮时，它将更改L1的文本（在下面的代码中可以正常工作）。当按下L2中的按钮时，它将更改L2的文本（在下面的代码中也可以正常工作）。

L1组件还具有第二个按钮，尽管它也可以更改位于另一个组件L2内部的文本。这是我的代码不再起作用的地方。仍然会调用使用的相同函数，并且会更改状态值，但是L2组件将永远不会重新渲染/其文本保持不变。

家长：

export const Parent = ({ hours, day, location, context }) => {

const numItemsToShow:number = 12;
const [showMore, setShowMore] = useState<any>({
    showMoreX: false,
    showMoreY: false,
    showMoreAmountX: 50 * numItemsToShow,
    showMoreAmountY: 50 * numItemsToShow,
    showMoreAmountTotalX: 0 //x cannot be set to auto => need to know total width
});


const doShowMoreX = (e) => {
    console.log('1')
    setShowMore((prevState) => {
        return {...prevState, showMoreX: !showMore.showMoreX};
    });
}

const doShowMoreY = (e) => {
    console.log('2')
    setShowMore((prevState) => { //PROBLEM: When called by L1, the Text in L2 never changes even though state changes - when called by L2 its all fine/text changes
        return {...prevState, showMoreY: !showMore.showMoreY};
    });
}


return (
    <>
    <ErrorBoundary>
        {
            (context === 'detailed') ?
            <L2 day={day} hours={hours} location={location} state={showMore} doShowMoreY={doShowMoreY}></L2> :
            <L1 day={day} hours={hours} location={location} state={showMore} doShowMoreX={doShowMoreX} doShowMoreY={doShowMoreY}></L1>
        }
    </ErrorBoundary>
</>
)
}

L1（儿童1）

export const L1 = ({ day, hours, location, state, doShowMoreX, doShowMoreY }) => {
const {showMoreX, showMoreAmountX, showMoreAmountTotalX} = state;

return (
    <div>
        {
            <div>
                <div>{(showMoreX) ? 'Some Output L1' : '-'}</div>
                <button onClick={doShowMoreX}>Change Output L1</button><br/>
                <button onClick={doShowMoreY}>Change Output L2</button> <!-- PROBLEM: L2 Text never changes even though doShowMoreY-function is called and state value is changed -->
            </div>
        }

    </div>
)
}

L2（儿童2）

export const L2 = ({ day, hours, location, state, doShowMoreY }) => {
const { showMoreY, showMoreAmountY } = state;
return (
    <div>
        {
            <div>
                <div>{(showMoreY) ? 'Some Output L2' : '-'}</div>
                <button onClick={doShowMoreY}>Change Output L2</button>
            </div>
        }

    </div>
)
}