Очевидная проблема в том, что ты рендеришь страницу по разному в зависимости от свойств экрана юзера, однако сервер не знает ничего об юзерском экране, потому результат SSR и результат на клиенте - разный, что и вызывает ошибки гидрации.
Красивого решения тут нет, только разные костыли, например:
1. Первый раз рендерить компонент всегда одинаково, а потом уже обновлять по useEffect в зависимости от экрана. Простое решение которое сразу заработает, однако может привести к кратковременном миганию на клиенте при загрузке.
1а. Вычислять по userAgent что у клиента мобила\планшет и первым рисовать наиболее вероятный вариант, а потом уже по useEffect использовать точный, если не угадали. Тоже самое но есть шанс что угадаем.
2. Рисовать все варианты на странице, а скрывать тупо классами css не используя этой либы. Тоже сразу заработает, но на странице куча мусора.
3. ?
Простой
