Добавить Удалить Класс на Scroll ReactJs

Question

Я застрял в этой проблеме.Я хочу добавить / удалить класс на элементе заголовка при прокрутке, но как-то не могу с этим справиться.

Я попытался смонтировать и размонтировать (нашел несколько решений здесь, в стеке), но в моем случае это не работает.Просто потому, что в большинстве случаев код относится к компоненту, но у меня немного другие настройки.

Вот полный код: https://codesandbox.io/s/angry-villani-lduor?fontsize=14

Я хочу добавить новый классна store_details_header

const handleChangeIndex = index => {
    setValue(index);
  };

  if (!selectedStore) {
    return null;
  }

  return (
    <div className="store-details">
      <div className="store-details__header" style={{ backgroundImage: `url(${selectedStore.headerBackgroundImgUrl})` }}>
        <img className="store-details__header__exit" src={exit} alt="exit" onClick={backToNearYou} />
        <img className="store-details__header__logo" src={selectedStore.headerLogoUrl} alt="logo" />
      </div>
      <div className="store-details__content" style={{ backgroundImage: `url(${selectedStore.contentBackgroundImgUrl})` }}>
        <div>
          <AppBar className={props.classes.root} position="static" color="default">
            <Tabs value={value} classes={{ indicator: props.classes.indicator }} onChange={setSelectedNavigationItem} variant="fullWidth">
              <StyledTab label="Products" />
              <StyledTab label="Items" />
            </Tabs>
          </AppBar>
          <SwipeableViews axis={'x'} index={value} onChangeIndex={handleChangeIndex}>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
          </SwipeableViews>
        </div>
      </div>
      {guestMode && renderGuestModeBox()}
      {selectedStore.loyaltyCard && renderLoyaltyCard()}
    </div>
  );
};

  const handleChangeIndex = index => {
    setValue(index);
  };

  if (!selectedStore) {
    return null;
  }

  return (
    <div className="store-details">
      <div className="store-details__header" style={{ backgroundImage: `url(${selectedStore.headerBackgroundImgUrl})` }}>
        <img className="store-details__header__exit" src={exit} alt="exit" onClick={backToNearYou} />
        <img className="store-details__header__logo" src={selectedStore.headerLogoUrl} alt="logo" />
      </div>
      <div className="store-details__content" style={{ backgroundImage: `url(${selectedStore.contentBackgroundImgUrl})` }}>
        <div>
          <AppBar className={props.classes.root} position="static" color="default">
            <Tabs value={value} classes={{ indicator: props.classes.indicator }} onChange={setSelectedNavigationItem} variant="fullWidth">
              <StyledTab label="Products" />
              <StyledTab label="Items" />
            </Tabs>
          </AppBar>
          <SwipeableViews axis={'x'} index={value} onChangeIndex={handleChangeIndex}>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
            <TabContainer>
              {' '}
              <div className="store-details__content__items">{renderSliderItems()}</div>
            </TabContainer>
          </SwipeableViews>
        </div>
      </div>
      {guestMode && renderGuestModeBox()}
      {selectedStore.loyaltyCard && renderLoyaltyCard()}
    </div>
  );
};