React Состояние обновляется, но компонент не перерендеривается

Есть состояние

const [openedAccodion, setOpenedAccodion] = useState<number[]>([]);

это состояние я прокидываю в два компонента

                              <AccordionMui
                                        {...{
                                            id,
                                            setOpenedAccodion,
                                            openedAccodion,
                                        }}

и в

                               <TableCellSequenceTableStyled {...{ id, openedAccodion }}>
                                    <Здесь не важно какой компонент />
                                </TableCellSequenceTableStyled>

В Аккордеоне по клику на хендлер делаю так

const opendAccordionHandle = (event: SyntheticEvent<Element, Event>, expanded: boolean): void => {
    setIsOpened(expanded);

    if (openedAccodion.includes(id)) {
        const index = openedAccodion.indexOf(id);
        if (index !== -1) {
            openedAccodion.splice(index, 1);
        }
        setOpenedAccodion(openedAccodion);
    } else {
        setOpenedAccodion([...openedAccodion, id]);
    }

то есть мое состояние это массив стрингов, если аккордеон открыт, то его айди лежит в этом массиве, если закрыт, то айди этого аккордеона нет в массиве в зависимости от наличия айди в массиве, я крашу нужный мне аккордеон

<AccordionStyled
    sx={{ backgroundColor: openedAccodion.includes(id) ? 'other.backgroundDefault' : '' }}

и здесь все работает прекрасно, когда акк открыт, у него цвет other.backgroundDefault, когда закрыт, он белый Во втором компоненте я делаю так

export const TableCellSequenceTableStyled = styled(TableCell, {
    shouldForwardProp: (props) => props !== 'openedAccodion' && props !== 'id',
})<TableCellSequenceTableStyledProps>(({ theme: { palette }, openedAccodion, id }) => ({
    padding: 0,
    alignContent: 'baseline',
    backgroundColor: openedAccodion && openedAccodion.includes(id) ? palette.other.backgroundDefault : '',
}));

Вроде тоже должно работать, но сам стейт обновляется, а цвет не меняется, то есть открыл я акк, цвет акк стал серым и цвет компонента TableCellSequenceTableStyled тоже стал серым, закрыл аккордеон и цвет акк стал белым, а компонент TableCellSequenceTableStyled не изменился (остался серым), когда я нажимаю на другой акк, то тот первый компонент TableCellSequenceTableStyled становится белым, то есть стейт обновляется, но компонент не перерендеривается и цвет у него остается прежним до следующего клика, памагите кто знает в чем тут соль


Ответы (0 шт):