Дочерний компонент не рендерится, когда изменение состояния вызвано его родным братом

Question

Есть два дочерних компонента (L1 и L2). Оба рендеринга текста и кнопки. Когда кнопка в L1 нажата, она меняет текст L1 (отлично работает в коде ниже). Когда кнопка в L2 нажата, она меняет текст L2 (также хорошо работает в коде ниже).

Компонент L1 дополнительно имеет вторую кнопку, но также для изменения текста, который находится внутри другого компонента L2. Здесь мой код больше не работает. Та же самая используемая функция все еще вызывается, и значение состояния изменяется, но компонент L2 никогда не будет повторно отображаться / его текст остается прежним.

PARENT:

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 (CHILD 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>
)
}