React Responsive Carousel returns all items in array on single carousel page

I am trying to utilize React Responsive Carousel. Currently, with my implementation, this code returns all objects in the array on the 1st page of the carousel (rending the point of a carousel useless). I'd like to have it so that each page of the carousel only shows one object in the array and you would need to utilize the "next" or "arrow" button via the carousel to view the next object in the array.

I tried to change profiles.map to profiles.forEach though this doesn't return any object at all.

I'm currently in a coding bootcamp, so forgive me if the code is bad altogether.

  const { loading, data } = useQuery(QUERY_PROFILES);
  const profiles = data?.profiles || [];

  return (
      <Carousel>
        <div className="flex-row justify-space-between my-4">
          {profiles &&
            profiles.map((profile) => (
              <div className="card col-12 col-xl-6" key={profile._id}>
                <div className="card-body">
                  <h3 className="card-title">
                    {profile.firstName} {profile.lastName} <br />
                    <span className="mechLoc">
                      Location: {profile.location}
                    </span>
                  </h3>
                  <Link
                    className="seeProfileBtn btn btn-primary"
                    to={`/profiles/${profile._id}`}
                  >
                    See mechanic profile
                  </Link>
                </div>
              </div>
            ))}
        </div>
      </Carousel>
  );
}