Рендеринг массива строк в React с использованием useState Hook

Question

Мне нужно получить доступ к ссылкам URL-адреса, хранящимся в массиве с именем скриншоты, когда я пытаюсь получить результат из серверной части, он работает нормально, а когда я задаю для json сведения о переменной состояния, он выводит его как строка. Как мне сделать URL-адреса отдельно. Я новичок в реакции и пробовал так много вещей, не мог понять, как решить эту проблему.

import React, { Fragment, useState, useEffect } from "react";
    import { useParams } from "react-router-dom";

    const AppDetails = () => {
      const [Details, setDetails] = useState([]);
      let { appId } = useParams();
      const getDetails = async appId => {
        try {
          if (appId) {
            const response = await fetch(
              "http://localhost:5000/appdetails/" + appId
            );
            const jsonDetails = await response.json();
            console.log(jsonDetails.screenshots[0]);     //working fine
            setDetails(jsonDetails);
          }
        } catch (err) {
          console.log(err);
        }
      };

      useEffect(() => {
        getDetails(appId);
      }, []);
      return (
        <Fragment>
          <h1 className="text-center mt-5">App Details </h1>
          <h2 className="text-center mt-5">Title: {Details.title}</h2>
          <h2 className="text-center mt-5">Summary: {Details.summary}</h2>
          <h6 className="text-center mt-5">Description: {Details.description}</h6>
          <h3 className="text-center mt-5">Developed By: {Details.developer}</h3>
          <h3 className="text-center mt-5">Rating: {Details.scoreText}</h3>
          <div
            key={Details.appId}
            className="col-md-12 mt-5 panel panel-default"
            width="500px"
            height="500px"
          >
            <img
              src={Details.screenshots[0]}
              alt={Details.appId}
              width="200px"
              height="200px"
            />
            <img
              src={Details.screenshots[1]}
              alt={Details.appId}
              width="200px"
              height="200px"
            />
            <img
              src={Details.screenshots[2]}
              alt={Details.appId}
              width="200px"
              height="200px"
            />
            <img
              src={Details.icon}
              alt={Details.appId}
              width="200px"
              height="200px"
            />
            <img
              src={Details.screenshots[3]}
              alt={Details.appId}
              width="200px"
              height="200px"
            />
            <img
              src={Details.screenshots[4]}
              alt={Details.appId}
              width="200px"
              height="200px"
            />
          </div>
        </Fragment>
      );
    };

    export default AppDetails;