Почему после изменения useState компонента не перерисовывается?

Question

Slav4ka @Slav4ka

React

Почему после изменения useState компонента не перерисовывается?

У меня есть компонент с хуком useState. После вызова setAdvertiserTypeFilter не происходит перерисовка компоненты, почему?

const ProfilesList = () => {
    
    const [advertiserTypeFilter, setAdvertiserTypeFilter] = useState({All: true, Individual: false, Companies: false});

    const changeAdvertiserFilter = (activeFilter) => {
        let currentFilerState = advertiserTypeFilter;
        for (let advertiser in currentFilerState) {
            activeFilter.toString() === advertiser.toString() ? currentFilerState[advertiser] = true : currentFilerState[advertiser] = false
        }
        setAdvertiserTypeFilter(currentFilerState);
        console.log(advertiserTypeFilter);
    };

    return (
        <Container>
            <Row>
                <Col>
                    <div className={style.profilesMainBlock}>

                        <div className={style.headers}>
                            <h5 className={style.address}>
                                Медицина <IoIosArrowRoundForward/> Врачи
                            </h5>
                        </div>

                        <div className={style.sorts}>

                            <div className={style.advertiserTypeFilters}>

                                <span onClick={() => changeAdvertiserFilter('All')}
                                      className={(advertiserTypeFilter.All) ? `${style.advertiserType} ${style.activeFilter}` : `${style.advertiserType}`}>
                                    Все
                                </span>

                                <span onClick={() => changeAdvertiserFilter('Individual')}
                                      className={(advertiserTypeFilter.Individual) ? `${style.advertiserType} ${style.activeFilter}` : `${style.advertiserType}`}>
                                    Частные
                                </span>

                                <span onClick={() => changeAdvertiserFilter('Companies')}
                                      className={(advertiserTypeFilter.Companies) ? `${style.advertiserType} ${style.activeFilter}` : `${style.advertiserType}`}>
                                    Компании
                                </span>
                            </div>

                            {/*<h6 style={{padding: '5px 0 0 20px'}}>
                                Сортировка:дата рейтинг стаж стоимость
                            </h6>*/}

                        </div>

                        <div className={style.profilesList}>
                            <ProfileItem/>
                            <ProfileItem/>
                            <ProfileItem/>
                            <ProfileItem/>
                        </div>
                    </div>
                </Col>
            </Row>
        </Container>
    )
};
export default ProfilesList