title: Argument of type is not assignable to parameter of type 'SetStateAction<never[]>'. in React
body: <p>I am new to React hooks and trying to learn it. I have a simple get api which is served in heroku server. I have following two components ContactCards and ContactCard in which I have provided the api in ContactCards.</p>
  <p>Here I have thumbnai and title as static data where as data1 and data2 are data coming from the api.</p>
  <p>My ContactCard</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  
  interface IContactCardProps {
    thumbnail?: string;
    title?: string;
    data1?: string;
    data2?: string;
  }
  
  interface IContactCardState {}
  
  class ContactCard extends Component&lt;IContactCardProps, IContactCardState&gt; {
    render() {
      return (
        &lt;div className=&quot;contact-card&quot;&gt;
          &lt;div className=&quot;container&quot;&gt;
            &lt;div className=&quot;thumbnail&quot;&gt;
              &lt;img src={this.props.thumbnail} alt={this.props.title} /&gt;
            &lt;/div&gt;
            &lt;div className=&quot;title&quot;&gt;{this.props.title}&lt;/div&gt;
            &lt;div className=&quot;data&quot;&gt;{this.props.data1}&lt;/div&gt; 
            &lt;div className=&quot;data&quot;&gt;{this.props.data2}&lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  
  export default ContactCard;
  </code></pre>
  <p><strong>My ContactCards</strong></p>
  <pre><code>import ContactCard from &quot;./ContactCard&quot;;
  import axios from &quot;axios&quot;;
  
  
  
  function ContactCards() {
  
    const[contacts, setContacts] = useState([])
  
    useEffect(() =&gt; {
      axios.get('https://texas-crm1.herokuapp.com/api/contactinfo')
        .then (res =&gt;{
          console.log(res.data[0])
          let data = res.data[0];
          setContacts ({
                      contacts: [
                        {
                          thumbnail: clock,
                          title: &quot;Opening Times&quot;,
                          data1: data.open_hour,
                          data2: data.close_hour,
                        },
                        {
                          thumbnail: telephone,
                          title: &quot;Phone&quot;,
                          data1: data.phone_1,
                          data2: data.phone_2,
                        },
                        {
                          thumbnail: location,
                          title: &quot;Location&quot;,
                          data1: data.street_name,
                          data2: data.city + &quot;, &quot; + data.state + &quot;, &quot; + data.country,
                        },
                      ],
                    });
        })
        .catch(err =&gt;{
          console.log(err)
        })
    })
  
    return (
      &lt;div&gt;
        
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Here, I got red underline from contacts in setContacts to all the way down to the closing parenthesis before catch function.</p>
  <p>And the error says the following:</p>
  <p><strong>Argument of type '{ contacts: { thumbnail: string; title: string; data1: any; data2: any; }[]; }' is not assignable to parameter of type 'SetStateAction&lt;never[]&gt;'.</strong></p>