Библиотека ReactJs img-mapper не может правильно заполнить данные JSON при обновлении: «Ошибка типа: невозможно прочитат ⇐ Javascript

[Anonymous]

Я использую библиотеку реагирования-img-mapper (https://github.com/img-mapper/react-img-mapper), и она работала нормально, пока мне не понадобилось добавить функциональность, требующую условного рендеринга другого компонент.
По сути, всякий раз, когда мне нужно установить для отображения другого компонента значение true/false, страница должна обновиться, а библиотека img-mapper выдает ошибку, говоря, что у нее нет правильные длины - даже несмотря на то, что при начальной загрузке все работало нормально, и я попробовал консольно записать значения, чтобы убедиться, что они заполнены правильно.
Буду признателен за любую помощь ! Также готов изменить мою систему использования файлов JSON, если есть какая-либо другая альтернатива, я относительно новичок в этом!
Изменить: я обнаружил, что это происходит при любой перезагрузке любой страницы. с помощью img-map я попытался отправить на маршрутизатор текущую страницу, и это привело к той же ошибке.
Вот код соответствующей страницы:
"use client"
import { React, useEffect, useState } from "react";
import ImageMapper from "react-img-mapper";
import { useRouter } from 'next/navigation'
import coords from "/public/JSON/coords.js";
import RecipeBook from "./RecipeBook";

export default function Kitchen() {
const router = useRouter();
const [showBook, setShowBook] = useState(true);
const [kitchenCoords, setKitchenCoords] = useState(null);

useEffect(() => {
setKitchenCoords(coords.kitchenCoords);
}, []);

if (!kitchenCoords) {
return (Loading...)
}

return (


{
// if it's one of the buttons, redirect there
(e.title == "/about/me/" || e.title == "/about/credits/" || e.title == "/") ? router.push(e.title)
: // else show book
// setShowBook(!showBook);
console.log(kitchenCoords);
}}
/>

{showBook &&

}

);
}

Файл JSON, сокращенный многоточием, выглядит следующим образом:
let kitchenCoords = [
{
"id": "homeButton",
"title": "/",
"shape": "rect",
"fillColor": "rgba(0,0,0,0)",
"strokeColor": "rgba(0,0,0,0)",
"lineWidth": 2.5,
"coords": [530,738,586,791]
},
...
]
export default {homeCoords, kitchenCoords};

Ошибки
TypeError: Cannot read properties of undefined (reading 'length')

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.



Подробнее здесь: https://stackoverflow.com/questions/793 ... esh-typeer