title: TypeError: show.visible is not iterable. React hooks, state does not update
body: <p><strong>I am using React's functional component to update the state. But I am getting error. My goal was after fetching the data, I will display 10 data first then use load more button, after clicking the button it will disply another 10 more data. Can Anyone help me out?</strong></p>
  
  <pre><code>import React, { useEffect, useState } from "react";
  import axios from "axios";
  import moment from "moment";
  const Events = () =&gt; {
    const [events, setEvents] = useState({ data: [] });
    const [show, setshow] = useState({ visible: 6 }); // HERE IS MY SHOW STATE AND INITIAL VALUE IS 6. 
  
    useEffect(() =&gt; {
      fetchingData();
    }, []);
  
    const fetchingData = () =&gt; {
      axios
        .get("/events")
        .then(response =&gt; {
  
          setEvents({ data: response.data.data });
        })
        .catch(err =&gt; console.log(err));
    };
  
  
   const eventDates = events.data.reduce((acc, event) =&gt; {
      acc[event.id] = {
        startDate: moment(event.event_dates.starting_day),
        endDate: moment(event.event_dates.ending_day),
        image: event.description.images.map(img =&gt; img.url),
        name: event.name.en
      };
      return acc;
    }, {});
  
  let sortedByStartDate = Object.keys(eventDates);
    sortedByStartDate.sort(
      (a, b) =&gt; eventDates[a].startDate - eventDates[b].startDate
    );
  
    return (
      &lt;div&gt;
        {sortedByStartDate.slice(0, show.visible).map((list, index) =&gt; { //IN HERE I USED SLICE METHOD AND CALLED MY INITIAL STATE BEFORE MAPPING.
          return (
            &lt;div key={index}&gt;
              &lt;h1&gt;{eventDates[list].startDate.calendar()}&lt;/h1&gt;
              &lt;div&gt;
                &lt;h2&gt;{eventDates[list].name}&lt;/h2&gt;
                &lt;img src={eventDates[list].image} alt="images" /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          );
        })}
        &lt;button
          onClick={() =&gt; setshow(() =&gt; [...show.visible, show.visible + 10])} //THIS IS THE BUTTON WHERE I WANT TO UPDATE THE STATE
        &gt;
          loadmore
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default Events;
  </code></pre>