title: React Responsive Carousel returns all items in array on single carousel page
body: <p>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 &quot;next&quot; or &quot;arrow&quot; button via the carousel to view the next object in the array.</p>
  <p>I tried to change <code>profiles.map</code> to <code>profiles.forEach</code> though this doesn't return any object at all.</p>
  <p>I'm currently in a coding bootcamp, so forgive me if the code is bad altogether.</p>
  <pre><code>  const { loading, data } = useQuery(QUERY_PROFILES);
    const profiles = data?.profiles || [];
  
    return (
        &lt;Carousel&gt;
          &lt;div className=&quot;flex-row justify-space-between my-4&quot;&gt;
            {profiles &amp;&amp;
              profiles.map((profile) =&gt; (
                &lt;div className=&quot;card col-12 col-xl-6&quot; key={profile._id}&gt;
                  &lt;div className=&quot;card-body&quot;&gt;
                    &lt;h3 className=&quot;card-title&quot;&gt;
                      {profile.firstName} {profile.lastName} &lt;br /&gt;
                      &lt;span className=&quot;mechLoc&quot;&gt;
                        Location: {profile.location}
                      &lt;/span&gt;
                    &lt;/h3&gt;
                    &lt;Link
                      className=&quot;seeProfileBtn btn btn-primary&quot;
                      to={`/profiles/${profile._id}`}
                    &gt;
                      See mechanic profile
                    &lt;/Link&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              ))}
          &lt;/div&gt;
        &lt;/Carousel&gt;
    );
  }
  </code></pre>