title: Typescript type checking error how to fix in React
body: <p>I have the following code:</p>
  
  <pre><code>const [fetchJobTitlesCall, { data }] = useLazyQuery&lt;Jobtitles, JobtitlesVariables&gt;(JobTitlesQuery)
  useEffect(() =&gt; {
      fetchJobTitlesCall({ variables: { keyword: 'Dev' } })
  }, [fetchJobTitlesCall, data])
  
  return (
              &lt;Autocomplete
                onChange={(event, value) =&gt; dispatchJobTitlesFilter(value)}
                multiple
                id="tags-outlined"
                options={data?.jobTitles} // this line throwing error
                getOptionLabel={option =&gt; option.name + ` (${option.totalApplicants})`} // this line throwing error
                filterSelectedOptions
                renderInput={params =&gt; (
                  &lt;TextField
                    {...params}
                    onChange={event =&gt; fetchJobTitles(event.target.value)}
                    variant="outlined"
                    label="Search Job Title"
                    placeholder="Search Job Title"
                  /&gt;
                )}
              /&gt;
  )
  </code></pre>
  
  <p>The error I get is: </p>
  
  <blockquote>
    <p>Type 'Jobtitles_jobTitles | undefined' is not assignable to type
    'unknown[]'.   Type 'undefined' is not assignable to type 'unknown[]'.</p>
  </blockquote>
  
  <p>Can anyone explain why I am getting the error?</p>