HelpMeeee

Основной проблемой я тут вижу то, что вы в state храните компоненты. Так не делать не надо, в state нужно хранить данные, а из них уже рендерить нужное. Тогда вы и классы сможете гибко добавлять какие надо и что угодно.

Так же есть вопрос по key, сыпет в консоль предупреждение, что кей не уникален в самом последнем return. Во-первых, я не пойму зачем там key, во-вторых, я не пойму как это пофиксить.

Вы рендерите элементы массива (pages), и, чтобы отличать их друг от друга, Реакту нужен какой-то идентификатор (подробнее в документации). У вас он как бы есть, но, во-первых, как сказано выше, его ломает то, что вы храните в state уже отрендеренные компоненты, а во-вторых, вы в качестве ключа для всех элементов используете одно и то же значение (cardDetails.id), а оно должно быть уникальным.

как выключить двойной вызов setTimeout в dev mode

Не надо его выключать, надо корректно чистить таймауты, для отлова таких проблем двойной вызов и делают.

Видимо, вы запутались и вам кажется, что вы изучаете Next.js, а на самом деле вы изучаете React (от Next в вашем коде нет абсолютно ничего) и вам явно нужно вернуться к документации и прочитать её от начала и до конца, там есть и ответы на ваши вопросы и примеры.

.pagination .dots .select{
  background: нужный цвет
}

https://codepen.io/topicstarter/pen/XWjgZQb

А вообще goo эффект просто делается, применяется фильтр SVG в котором всего две опции, гаусиан блюр + матрица цветов со смещением ...после чего применяем к нужному месту - как в моём примере - смотрите



Вот к примеру goo эффект вообще без всякого SVG фильтра - смотрите



Пример как у вас без всякого gsap

Вот по-быстрому накидал. Соответственно, у того элемента, у которого стоит класс active фон белый с обводкой красной, слева красные, справа серые. Если класса active нет вообще, считай, что путь пройден/завершен. Если задача в процессе, то хотя бы один элемент должен быть с классом active, а то иначе смысл тогда ...

Дело в приоритете операторов: у && он выше, чем у ||. Поэтому выполняется так:
pin.length == 4 || (pin.length == 6 && a == 1)
Лечится расстановкой скобок.

Кроме того желательно не сравнивать a с 1: т.к. метод test() возвращает Boolean true или false, можно прямо проверятьif (a && (pin.length === 4 || pin.length === 6)) {

Их нужно преобразовать в строку

Не нужно.

по идее должно выдать два совпадение (5,6)

Нет, в представленных массивах совпадают три элемента: 5, 6 и 8.
Впрочем, если необходимо чтоб сопадали ключ и значение, то тогда таких элементнов как раз будет два: 5 и 6

как реализовать задачу

$intersection = array_intersect_assoc($m, $m1);

PS. Если итоговый результат нужен все ж в виде строки, то можно преобразовать в нее выходной массив:
$intersectionString = implode(",", $intersection);