I can’t get the props or the api data to mount the page

Question

Guys I’m having trouble with React with nextjs using Hooks with props , I set up a Carousel that shows several cards that use a map api to mount the cards and passes to Carousel , only when I click on the card I put a link to open another page and I wanted to take the data of the card and mount on another page but I can’t and Carousel turned into a component that passes props even so when I try to mount on the other page with onclick and tb with link of nextjs I can’t. Passing props and everything I used to mount the cards.

here the component Carousel

import Link from "next/link";
import Slider from "react-slick";

import {
  Button,
  Card,
  CardBody,
  CardImg,
  CardSubtitle,
  CardText,
  CardTitle,
} from "reactstrap";

export default function Carousel({ sales, onCard }) {
  const database = sales;

  let settings = {
    infinite: true,
    speed: 700,
    arrows: true,
    slidesToShow: 4,
    slidesToScroll: 4,

    responsive: [
      {
        breakpoint: 980,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 700,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2,
        },
      },
      {
        breakpoint: 460,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1,
        },
      },
    ],
  };
  const handleClick = ({ target }) => {
    onCard(target);
  };
  return (
    <div className="container">
      {database.length === 0 ? (
        <div style={{ fontSize: "1.8rem" }}>
          <div className="spinner-border" role="status">
            <span className="sr-only">Loading...</span>
          </div>
          <span className="ml-4">Carregando carrousel</span>
        </div>
      ) : (
        <Slider {...settings}>
          {database.map((current) => {
            const product = current.map(
              ({ id, name, description, photo, price, isCheck }) => {
                return (
                  <Link href="/about" rightCheck={onCard}>
                    <div className="link">
                      <Card key={id} className="card" onClick={handleClick}>
                        <CardImg
                          top
                          className="imgCard"
                          src={photo}
                          alt={name}
                        />
                        <CardBody>
                          <CardTitle tag="h5" className="card-title">
                            {name}
                          </CardTitle>
                          <CardText className="description">
                            {description}
                          </CardText>
                          <CardSubtitle tag="h6" className="mt-2 text-muted">
                            {price}
                          </CardSubtitle>
                          <Button className="buttonCard">Comprar</Button>
                        </CardBody>
                      </Card>
                    </div>
                  </Link>
                );
              }
            );

            return product;
          })}
        </Slider>
      )}
    </div>
  );
}

**here goes where I put the Carousel **

import React, { useState, useEffect } from "react";
import data from "../../../../public/data.json";
import { getData } from "../../../api/apiService";
import { Container } from "reactstrap";
import styles from "../../../styles/home/section.module.css";
import CardCarousel from "./Carousel";
import Link from "next/link";

export default function Section() {
  const database = data.showcases;
  const [allSales, setAllSales] = useState([]);

  // // Trazendo direto api pelo fetch e usando o estado para setala
  // useEffect(() => {
  //  const data =async(){
  // const result = fetch("https://sandbox.houpa.app/api-tests/showcases")

  //     .then((res) => res.json())
  //     .then((data) => {
  // setTimeout(() => {
  //       setAllSales(data);
  // },2000);
  //     });
  // return result
  // }
  // }, []);

  // Usando async e await na requesição pela api
  useEffect(() => {
    const data = async () => {
      const sales = await getData();
      setTimeout(() => {
        setAllSales(sales);
      }, 2000);
    };
    data();
  }, []);
  const handleCheck = (item) => {
    // e.preventDefault();
    console.log(item);
  };

  return (
    <div>
      {/* trouxe a api pelo arquivo mas poderia trazer por fetch,
      ou pelo pacote axios */}
      {database.map(({ id, name, thumb }) => {
        return (
          <Container className={styles.container} key={id}>
            <div className={styles.layout}>
              <img src={thumb} className={styles.imgLogo} alt={name} />
              <p className={styles.title}> {name}</p>
            </div>

            <CardCarousel sales={allSales} onCard={handleCheck} />
          </Container>
        );
      })}
    </div>
  );
}

here’s the code of the about I want to open the card when you click

import React from "react";
import { useState } from "react";
import CardCarousel from "../components/home/section/Carousel";

export default function Produto({ rightCheck }) {
  const [isCard, setIsCard] = useState(false);
  return <div>{console.log(rightCheck)}</div>;
}

• here as it is in the Home browser

• here’s what I got as far as the onclick target but I wanted the complete data like: id, Description, photo, price, but I can’t bring this data.