Why is my function not working- pop up image gallery

I'm trying to make a standard effect, where clicking on an image in a gallery will enlarge the image, put it at the center of the screen (in front of everything else), and darken the background. I haven't set up the slideshow part yet (so it won't change images), but the aim is to create an index so that I can do that in the future. I'm following a tutorial and trying to adapt it to my backend, but I'm missing a beat. It's not registering which image has been clicked (and I'm getting two errors in the console- 404, and 500). I'm using Nextjs as my frontend, Sanity for my backend.

import React, { useState } from 'react';
import { client, urlFor } from '../lib/client';
import { Header, Footer, Modal } from '../components';

const sets = ({setData, imagesData}) => {
  
  const [clickedImage, setClickedImage] = useState(null);
  const [currentIndex, setCurrentIndex] = useState(null);

  const handleClick = (imagesData, index) => {
    setCurrentIndex(index);
    setClickedImage(imagesData.image);
  };

  const handleRotationRight = () => {
    const totalLength = imagesData.imageItems.length;
    if(currentIndex + 1 >= totalLength){
      setCurrentIndex(0);
      const newData = imagesData.imageItems[0];
      setClickedImage(newData);
      return;
    }
    const newIndex = currentIndex + 1;
    const newData = imagesData.imageItems.filter((image) => {
      return imagesData.imageItems.indexOf(image) === newIndex;
    });
    const newItem = newData[0].image;
    setClickedImage(newItem);
    setCurrentIndex(newIndex);
  };

  return ( 
    <div> 
      <Header />
      <main className="slug-gallery"> 
        <div className="title">
            <div className="title-line-left"></div>
              <h2>{setData.set_name}</h2>
            <div className="title-line-right"></div>
        </div>
        <div className="images-container">
            <ul className="overall-images">
            {imagesData.imageItems && imagesData.imageItems.map((imagesData, index) => (
              <li key={index}>
                <img 
                  src={urlFor(imagesData.image).auto('format').url()}
                  className="the_image"
                  alt='test a'
                  onClick={() => handleClick(imagesData, index)}
                /> 
              </li>
            ))}
            </ul>
        </div>
        {clickedImage && (
          <Modal 
            clickedImage={clickedImage} 
            handleRotationRight={handleRotationRight}
            setClickedImage={setClickedImage}
          />
        )}
      </main>
      <Footer />
    </div>
  )
}

export default sets

export const getServerSideProps = async (pageContext) => {
  const setSlug = pageContext.query.slug;

  const setQuery = `*[_type == 'set' && slug.current == $setSlug][0]`;
  const imagesQuery = `*[_type == 'set' && slug.current == $setSlug][0]{'imageItems':set_images[]{image{
    asset->{_id, url}, alt, name, date, size, materials}}}`;

  const setData = await client.fetch(setQuery, {setSlug});
  const imagesData = await client.fetch(imagesQuery, {setSlug});

  return {
    props: {setData, imagesData}
  }
}

Heres the Modal component:

import React from 'react'

const Modal = ({clickedImage, handleRotationRight, setClickedImage}) => {
    
    const handleClick = (e) => {
        if(e.target.classList.contains("dismiss")){
            setClickedImage(null);
        }
    }
    
    return(
        <>
        <div className="overlay dismiss" onClick={handleClick}>
            <img src={clickedImage} alt='test b'/>
            <span className="dismiss" onClick={handleClick}>x</span>
        </div>
        <div onClick={handleRotationRight} className="overlay-arrows_left">
            <img src="/next_portfolio/public/images/cart.png" alt='test c'/>
        </div>
        </>
    )
};

export default Modal;