title: useState and useContext in TypeScript
body: <p>With useState, I wanted to create an object that I will continue to fetch in the (probably far ^^) future.</p>
  <p>The code is to act as a form that will be on several subpages, each subpage is to provide different data to the object, which will eventually be fetching into the database.</p>
  <p>Theoretically, I was able to combine useState and useContext, unfortunately I get the error</p>
  <blockquote>
  <p>Type '{}' must have a '[Symbol.iterator] ()' method that returns an iterator.ts (2488)</p>
  </blockquote>
  <p>formContext.ts</p>
  <pre><code>import React, { useState, createContext } from 'react';
  
  export const FormContext = createContext({});
  
  export const FormProvider: React.FC = props =&gt; {
    const [formData, setFormData] = useState({ title: '' });
    return &lt;FormContext.Provider value={[formData, setFormData]}&gt;{props.children}&lt;/FormContext.Provider&gt;;
  };
  </code></pre>
  <p>ServiceBoxGenerator.ts</p>
  <pre><code>import React, { useContext } from 'react';
  
  //Component Import
  import { ServiceBox } from './ServiceBox/ServiceBox';
  import { ProcedureBox } from './ProcedureBox/ProcedureBox';
  //Context Import
  import { ServiceContext } from '../../App';
  import { FormContext } from '../../utils/formContext';
  
  export const ServiceBoxesGenerator: React.FC = () =&gt; {
    const { data } = useContext(ServiceContext);
    const dataArray = data;
    const [formData, setFormData] = useContext(FormContext);
    if (formData.title) {
      const searchedObject = dataArray.find(x =&gt; x.title === formData.title);
      const procedureObject = searchedObject?.services;
      return (
        &lt;&gt;
          {procedureObject?.map(data =&gt; {
            return &lt;ProcedureBox key={data.id} icon={data.icon} title={data.title} description={data.description} price={data.price} /&gt;;
          })}
        &lt;/&gt;
      );
    }
    return (
      &lt;&gt;
        {dataArray.map(data =&gt; {
          return (
            &lt;div
              key={data.id}
              onClick={() =&gt; {
                setFormData({ title: data.title });
              }}
            &gt;
              &lt;ServiceBox key={data.id} icon={data.icon} title={data.title} serviceAmount={data.amount} /&gt;
            &lt;/div&gt;
          );
        })}
      &lt;/&gt;
    );
  };
  </code></pre>
  <p><a href="https://i.stack.imgur.com/IbhQD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IbhQD.png" alt="This is where my error is" /></a></p>
  <p>I am asking for help and a hint what I am doing wrong because I have no idea what I can change to make it work.</p>
  <p>Or maybe someone has another way to create such an object, I don't insist on using useState with useContext.</p>
  <p>Thank you very much in advance for all your help, have a nice day ;)</p>