title: Component throwing Error causes error (TS2786) "Type 'undefined' is not assignable to type 'Element | null'"
body: <p>I am trying to convert a small React project to Typescript. I have this parent <code>App.tsx</code> component as below:</p>
  <pre><code>const App = () =&gt; {
    return (
      &lt;&gt;
        &lt;GlobalStyle /&gt;
        &lt;BrowserRouter&gt;
          &lt;Header /&gt;
          &lt;ErrorBoundary&gt;
            &lt;MoviesContextProvider&gt;
              &lt;$Page&gt;
                &lt;Routes&gt;
                  &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
                  &lt;Route path=&quot;/:slug&quot; element={&lt;Details /&gt;} /&gt;
                  &lt;Route path=&quot;/search&quot; element={&lt;SearchResults /&gt;} /&gt;
                  &lt;Route path=&quot;/*&quot; element={&lt;NotFound /&gt;} /&gt;
                &lt;/Routes&gt;
              &lt;/$Page&gt;
            &lt;/MoviesContextProvider&gt;
          &lt;/ErrorBoundary&gt;
        &lt;/BrowserRouter&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  <p>for the <code>/search</code> route, I try to render the <code>SearchResults</code> component and in that component, I make a call to the API and return the search results. If I get an error, I throw an <code>Error</code> so my <code>ErrorBoundary</code> handles it by showing an error message.</p>
  <p>The <code>SearchResults</code> component looks like this:</p>
  <pre><code>const SearchResults = () =&gt; {
    const location = useLocation();
  
    const [state, setState] = useState({
      error: null,
      results: null,
      status: &quot;idle&quot;,
    });
  
    const searchQuery = new URLSearchParams(location.search).get(&quot;q&quot;);
  
    const searchMovies = async () =&gt; {
      setState({ ...state, status: &quot;pending&quot; });
  
      try {
        const response = await fetch(
          `${API_URL}?q=${searchQuery}`,
          {
            headers: {
              Authorization: `Bearer ${API_TOKEN}`,
            },
          }
        );
  
        if (!response.ok) {
          setState({
            ...state,
            error: new Error(response.status.toString()),
            status: &quot;rejected&quot;,
          });
        } else {
          const { movies } = await response.json();
  
          setState({ ...state, results: movies, status: &quot;resolved&quot; });
        }
      } catch (error) {
        setState({ ...state, error, status: &quot;rejected&quot; });
      }
    };
  
    useEffect(() =&gt; {
      searchMovies();
    }, []);
  
    switch (state.status) {
      case &quot;idle&quot;:
        return null;
      case &quot;pending&quot;:
        return &lt;h1&gt;Loading...&lt;/h1&gt;;
      case &quot;rejected&quot;:
        throw state.error; // THIS PART CAUSES THE ISSUE
      case &quot;resolved&quot;:
        return (
          &lt;&gt;
            &lt;h1&gt;Search results for &quot;{searchQuery}&quot;&lt;/h1&gt;
            {state.results ? (
              // List results
            ) : (
              &lt;p&gt;No results&lt;/p&gt;
            )}
          &lt;/&gt;
        );
    }
  };
  </code></pre>
  <p>After trying to convert the code to TS, I started to get the</p>
  <pre><code>  TS2786: 'SearchResults' cannot be used as a JSX component.
    Its return type 'Element | null | undefined' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'.
  </code></pre>
  <p>due to the fact the I am not returning an <code>Element</code> or <code>null</code> in the case of an error or bad response from the API.</p>
  <p>I was wondering what's a good approach to solve the issue, thanks!</p>