Detail Image Rendering in React

Question

When I tried to image, image is broken

BASE_URL I want to fetch is composed like this.

{
  "renderings": [
    {
      "_id": "image_file"(string type)
    },
    ...more _id
}

This is a similar topic to the question I posted a few days ago.

But I see the problem seems to arise while implementing the detail page.

// App.tsx

function App() {
  return (
    <BrowserRouter>
      <Route exact path="/">
        <Gallery />
      </Route>
      <Route path="/detail">
        <Detail />
      </Route>
    </BrowserRouter>
  );
}

export default App;

// Gallery.tsx

function Gallery() {
  const [gallery, setGallery] = useState<any>();

  const getGallery = async () => {
    const json: GalleriesProps = await (await fetch(BASE_URL)).json();
    setGallery(json.renderings);
  };

  useEffect(() => {
    getGallery();
  }, []);

  return (
    <ImgContainer>
      <Link to="/detail">
        {gallery &&
          gallery.map((x: any) => (
            <img key={x._id} alt="gallery_logo" src={x._id} />
          ))}
      </Link>
    </ImgContainer>
  );
}

export default Gallery;

// Detail.tsx

function Detail() {
  const [galleryDetail, setGalleryDetail] = useState<any>();
  const [clicked, setClicked] = useState(false);
  console.log(galleryDetail);

  useEffect(() => {
    async function fetchGallery() {
      const response = await fetch(BASE_URL);
      const result: GalleriesProps = await response.json();
      setGalleryDetail(result.renderings[0]._id);
    }
    fetchGallery();
  }, []);

  const prevPage = () => {
    if (clicked) return;
    setClicked(true);
  };
  const nextPage = () => {
    if (clicked) return;
    setClicked(true);
  };

  return (
    <>
      <Container>
        <Button onClick={prevPage}>
          <FontAwesomeIcon icon={faArrowAltCircleLeft} />
        </Button>
        <ImageDetail>
          {galleryDetail && <img src={galleryDetail} />}
        </ImageDetail>
        <Button onClick={nextPage}>
          <FontAwesomeIcon icon={faArrowAltCircleRight} />
        </Button>
      </Container>
    </>
  );
}

export default Detail;

When I click on an image, I go to the detail page, and then I have to implement that image to show, For example, If I click the image of the cat.jpeg file, I have to go to the detail page and change the size of cat.jpeg and show the rest as it is, but I can't quite figure it out.