Why does the data from the store not fall into the condition for the button parameter when the component is first rendered?

Question

React

The dateIndicator value comes from the store and is initially equal to 'M' - that is, the active class must initially be assigned to the M button by a ternary condition for the className parameter - which does not happen when the component is first rendered. The active class is not assigned to any element. In the future, when you press the event, it works correctly and the class is assigned. How to make it so that when the component is loaded, the active class is assigned to ?

export const ControlIndicators = ({ position }) => {
  const dispatch = useDispatch();
  const dateIndicator = useSelector(getDateIndicator);

  const clickHandler = value => {
    dispatch(setDateIndicator(value));
  };

  const buttons = [
    { title: 'Дневной показатель', value: 'Д' },
    { title: 'Месячный показатель', value: 'М' },
  ];

  return (
    <Control position={position} className="leaflet-bar-row">
      {buttons.map(item => {
        return (
          <button
            className={
              dateIndicator === item.value
                ? 'buttons-leaflet-row-item active'
                : 'buttons-leaflet-row-item'
            }
            title={item.title}
            value={item.value}
            onClick={() => clickHandler(item.value)}
          >
            {item.value === 'Д' ? 'Д' : 'М'}
          </button>
        );
      })}
    </Control>
  );
};

Answer 1

Based on the information you provided, it is impossible to answer the question.
Here is an example without a state and it works there.
https://codesandbox.io/s/billowing-dream-d4r3c?fil...
Sandbox the issue and post a link.