Имеется код на react в файле arachnoentomology.tsx

import Search from "./Search";
import CustomizedHook from "./Tags";
import Viewer from "./Viewer";
import React, { useEffect, useState } from "react";

const Arachnoentomology = () => {
  const [visible, setVisible] = useState(false); // Изначально устанавливаем видимость в false
  const [visible_hook, setVisible_hook] = useState(false); // Изначально устанавливаем видимость в false
  const [items, setItems] = useState<Item[]>([]);

  interface Item {
    id: number;
    title: string;
    preview: string;
    dzi: string;
  }

  useEffect(() => {
    fetch("/api/tasks")
      .then((response) => response.json())
      .then((data) => setItems(data))
      .catch((error) => console.error(error));
  }, []);

  function toggleViewer() {
    setVisible((prevVisible) => !prevVisible); // Инвертируем значение видимости
  }

  function toggleFilter() {
    setVisible_hook((prevVisible) => !prevVisible); // Инвертируем значение видимости
  }

  return (
    <div className="Arachnoentomology">
      <h1>Арахноэнтомология</h1>
      <p>
        Медицинская арахноэнтомология или медицинская энтомология — раздел
        медицинской паразитологии; наука, изучающая заболевания человека,
        вызываемые членистоногими или передающиеся ими, морфологию и экологию
        членистоногих эктопаразитов человека, их взаимодействие с самим
        человеком, и исследующая возбудителей этих болезней, а также меры борьбы
        с ними и профилактики.
      </p>
      <br />
      <Search />
      <div className="filer_windows">
        <button onClick={toggleFilter}>Расширенный поиск</button>
        <br />
        <div className="tags_hooks">{visible_hook && <CustomizedHook />}</div>
        <br />
      </div>
      <ul>
        {items.map((item, index) => {
          console.log(item.preview);
          console.log(item.dzi);
          console.log(item.title);
          return (
            <div key={index}>
              <a href={item.dzi} target="_blank" rel="noopener noreferrer">
                <img src={item.preview} alt="description" />
              </a>
              <br />
              {item.title}
            </div>
          );
        })}
      </ul>
      <div className="gallery">
        <br />
        <button onClick={toggleViewer}>Viewer_window</button>
        <br />
        {visible && <Viewer />} {/* Рендерим Viewer, если visible === true */}
      </div>
    </div>
  );
};

export default Arachnoentomology;

а так же скрипт openseadragon

import OpenSeaDragon from "openseadragon";
import React, { useEffect, useState } from "react";


const OpenSeaDragonViewer = ({ image }) => {
  const [viewer, setViewer] = useState( null);

  useEffect(() => {
    if (image && viewer) {
      viewer.open(image.source);
    }
  }, [image]);

  const InitOpenseadragon = () => {
    viewer && viewer.destroy();
    setViewer(
      OpenSeaDragon({
        id: "openSeaDragon",
        prefixUrl: "openseadragon-images/",
        animationTime: 0.5,
        blendTime: 0.1,
        constrainDuringPan: true,
        maxZoomPixelRatio: 2,
        minZoomLevel: 1,
        visibilityRatio: 1,
        zoomPerScroll: 2
      })
    );
  };

  useEffect(() => {
    InitOpenseadragon();
    return () => {
        viewer && viewer.destroy();
    };
  }, []);

  return (
  <div 
  id="openSeaDragon" 
  style={{
    height: "800px",
    width: "1200px"
  }}
  >
  </div>
  );
};

export { OpenSeaDragonViewer };


и просмотрщик файлов viewer.js

import React, { useState } from "react";

const Viewer = () => {
  const [image, setImage] = useState(null);

  const handleClick = (e) => {
    const id = e.target.id;
    const item = items.find((item) => item.id === id);
    setImage(item);
  };

  return (
    <div>
      <div id="openSeaDragon" style={{ height: "800px", width: "1200px" }} />
      <ul>
        {items.map((item, index) => {
          return (
            <li key={index}>
              <a href={item.dzi} target="_blank" rel="noopener noreferrer">
                <img src={item.preview} alt="description" />
              </a>
              <br />
              {item.title}
            </li>
          );
        })}
      </ul>
      <button onClick={handleClick}>Open</button>
    </div>
  );
};

export default Viewer;

Измени код в этих трех файлах так, чтобы при нажатии на каждое изображение из базы данных по полю items.preview происходил переход в новый компонент с просмотрщиком изображений openseadragon, и в этот компоненте открывался файл формата .dzi из базы данных из поля items.dzi.