Не могу прочитать состояние реакции внутри JSX в стеке с NEXTJS

Question

У меня проблема с чтением состояния. Компонент слайдера вложен в [projects.js]. Поскольку Next JS имеет очень удобный метод для динамической маршрутизации c, основная идея состоит в том, чтобы изменить большинство данных внутри компонента шаблона на основе текущего пути.

Ожидаемое поведение для моего кода состояло в том, чтобы сгенерировать рабочий путь для изображений (смотрите 'key' и 'sr c').

<motion.img
    ref={imageRef}
    className='absolute h-full md:rounded object-contain'
    key={images[src][imageIndex]}
    src={images[src][imageIndex]}

Есть несколько способов сделайте это:

1. Спросите Next о маршруте при рендеринге на стороне клиента и сохраните его в состоянии.

    import { useRouter } from 'next/router';

    const router = useRouter();

    useEffect(() => {
        setSrc(router.query.project);
    }, [src]);

Используйте getInitialProps и сохраняйте там данные при запуске первой функции на сервере.

Carousel.getInitialProps = async query => {
    return {
        src: images[query.project]
    };
};

Желательно использовать второй вариант с начальными реквизитами, но я не могу использовать следующий JS , Функционал слайдера не позволяет сделать это, потому что код ломается при возврате на предыдущую страницу. Далее Js просто делает [projects.js] статически доступным на стороне клиента по умолчанию и ограничивает начальные реквизиты.

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

    console.log(src); ==== 'barva'
    // console.log(images.barva[0]); ====== ["/images/barva/barva-design.png", ...]
    // console.log(images[src][imageIndex]); Cannot read property '0' of undefined

Очень странное поведение, так как он читает мой импорт с помощью файла json, читает при присваивании состоянию, показывает картинки, когда я вручную заполняю путь без каких-либо динамических переменных c, он даже читает вторую часть пути [imageIndex], но никогда не читает состояние как [src] внутри JSX.

Существуют ли лучшие способы импорта данных для создания динамического компонента c? или как исправить этот код ??

репо к проекту: gihub repo