Hello, I am using Strapi 4.22.0 and I have a problem with the images being called, the rest is shown to me like the names, the thing is that I have searched everywhere to solve the problem but I have not been able to

[Hello, I am using Strapi 4.22.0 and I have a problem with the images being called, the rest is shown to me like the names, the thing is that I have searched everywhere to solve the problem but I have not been able to.

  • Strapi 4.22.0:

Json of categories

Complete code

"use client";

import "../home.css"
import React, {useEffect, useState} from "react";
import Link from "next/link";
import GlobalApi from "../GlobalApi";
import Footer from "../components/Footer";
import Image from "next/image";

export default function CategoryPage({children}) {
    const [categoryList, setCategoryList] = useState([]);
    useEffect(() => {
        console.log(setCategoryList());
        getCategoryList();
    }, []);

    const getCategoryList = () => {
        GlobalApi.getCategory().then((resp) => {
            setCategoryList(resp.data.data);
        });
    };
    // const SliderList=await GlobalApi.getSlider();
    return (
        <main>
            {/*navbar of the categories*/}
            <nav className="origenes-navbar text-black flex backdrop-filter backdrop-blur-lg lg:justify-center z-10
            sticky top-0 width-[100vw] w-full py-1 sm:px-12 px-5 justify-between items-center">
                <div className="nav-content">
                    <div className="nav-logo">Origenes (Category)</div>
                    <ul className="nav-items">
                        <li className="max-sm:hidden">
                            <button disabled>Overview</button>
                        </li>
                        <li className="max-sm:hidden"><Link href="/Tienda/Product">
                            <button className="">Product</button>
                        </Link></li>
                        <li className="max-sm:hidden">
                            <button>Compare</button>
                        </li>
                        <li>
                            <button className="buy-btn">Buy</button>
                        </li>
                    </ul>
                </div>
            </nav>
            {/*End Navbar*/}

            <section>
                <div className="main-elem">
                    <h1>Category</h1>
                </div>
                <div className="canvas-elem">
                    <canvas id="hero-lightpass"></canvas>
                </div>
            </section>

            <section className="section1 rounded-xl">
                <div>
                    <div className="p-4 mx-auto lg:max-w-7xl sm:max-w-full grid">
                        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
                            {/* get Category List */}
                            {categoryList &&
                                categoryList.map((category, index) => (
                                    <div key={index} className="text-lg text-gray-800 text-center bg-white p-5
                                    transition-all relative rounded-xl overflow-hidden shadow-lg hover:scale-105 duration-500 cursor-pointer">
                                        {/*<img*/}
                                        {/*    src="https://teleasistencia.es/storage/redactor/iPtgvHtjOqFSDVygp8Bsj2gtNvPlpu.jpg"/>*/}
                                        {/*<img*/}
                                        {/*    src={data.attributes.image.data.attributes.url}/>*/}
                                        <Image
                                            src={category.attributes.image.data[0].attributes.url}
                                            alt={category.attributes.name}
                                            width={500}
                                            height={300}
                                            layout="fill"
                                            objectFit="cover"
                                        />
                                        <div
                                            className="bg-white w-10 h-10 flex items-center justify-center rounded-full cursor-pointer absolute top-3 right-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18px"
                                                 className="fill-gray-800 inline-block" viewBox="0 0 64 64">
                                                <path
                                                    d="M45.5 4A18.53 18.53 0 0 0 32 9.86 18.5 18.5 0 0 0 0 22.5C0 40.92 29.71 59 31 59.71a2 2 0 0 0 2.06 0C34.29 59 64 40.92 64 22.5A18.52 18.52 0 0 0 45.5 4ZM32 55.64C26.83 52.34 4 36.92 4 22.5a14.5 14.5 0 0 1 26.36-8.33 2 2 0 0 0 3.27 0A14.5 14.5 0 0 1 60 22.5c0 14.41-22.83 29.83-28 33.14Z"
                                                    data-original="#000000"></path>
                                            </svg>
                                        </div>
                                        <h1>{category.attributes.name}</h1>
                                    </div>
                                ))}
                        </div>
                    </div>
                </div>
            </section>

            <Footer/>
        </main>
    )
    {children}
}

This is the part of the problem with images.

<section className="section1 rounded-xl">
                <div>
                    <div className="p-4 mx-auto lg:max-w-7xl sm:max-w-full grid">
                        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
                            {/* get Category List */}
                            {categoryList &&
                                categoryList.map((category, index) => (
                                    <div key={index} className="text-lg text-gray-800 text-center bg-white p-5
                                    transition-all relative rounded-xl overflow-hidden shadow-lg hover:scale-105 duration-500 cursor-pointer">
                                        {/*<img*/}
                                        {/*    src={data.attributes.image.data.attributes.url}/>*/}
                                        <Image
                                            src={category.attributes.image.data[0].attributes.url}
                                            alt={category.attributes.name}
                                            width={500}
                                            height={300}
                                            layout="fill"
                                            objectFit="cover"
                                        />
                                        <div
                                            className="bg-white w-10 h-10 flex items-center justify-center rounded-full cursor-pointer absolute top-3 right-4">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="18px"
                                                 className="fill-gray-800 inline-block" viewBox="0 0 64 64">
                                                <path
                                                    d="M45.5 4A18.53 18.53 0 0 0 32 9.86 18.5 18.5 0 0 0 0 22.5C0 40.92 29.71 59 31 59.71a2 2 0 0 0 2.06 0C34.29 59 64 40.92 64 22.5A18.52 18.52 0 0 0 45.5 4ZM32 55.64C26.83 52.34 4 36.92 4 22.5a14.5 14.5 0 0 1 26.36-8.33 2 2 0 0 0 3.27 0A14.5 14.5 0 0 1 60 22.5c0 14.41-22.83 29.83-28 33.14Z"
                                                    data-original="#000000"></path>
                                            </svg>
                                        </div>
                                        <h1>{category.attributes.name}</h1>
                                    </div>
                                ))}
                        </div>
                    </div>
                </div>
            </section>