title: Component cannot be used as a JSX component. Its return type 'Element[]' is not a valid JSX element
body: <p>I'm currently getting the following error on the <code>Todos</code> component inside <code>TodoApp.tsx</code>: 'Todos' cannot be used as a JSX component.
  Its return type 'Element[]' is not a valid JSX element.
  Type 'Element[]' is missing the following properties from type 'Element': type, props, key</p>
  <p>And this is my folder structure</p>
  <p><code>TodoApp.tsx</code></p>
  <pre><code>function TodoApp() {
    return (
      &lt;Body&gt;
        &lt;AppDiv&gt;
          &lt;Form /&gt;
          &lt;Todos /&gt;
          &lt;Footer /&gt;
        &lt;/AppDiv&gt;
      &lt;/Body&gt;
    );
  }
  </code></pre>
  <p><code>Todos.tsx</code></p>
  <pre><code>function Todos(): JSX.Element[] {
    const todos = useSelector((state: RootState) =&gt; state.todos);
    const footer = useSelector((state: RootState) =&gt; state.footer);
  
    if (footer.hideAll) {
      if (footer.showCompleted) {
        return todos
          .filter((todo) =&gt; !todo.completed)
          .map((todo: any) =&gt; (
            &lt;&gt;
              &lt;ul&gt;
                &lt;Todo todo={todo} /&gt;
              &lt;/ul&gt;
            &lt;/&gt;
          ));
      }
      return todos.map((todo) =&gt; (
        &lt;&gt;
          &lt;div&gt;
            &lt;Todo todo={todo} /&gt;
          &lt;/div&gt;
        &lt;/&gt;
      ));
    }
  
    return todos.map(() =&gt; (
      &lt;&gt;
        &lt;div&gt;&lt;/div&gt;
      &lt;/&gt;
    ));
  }
  </code></pre>
  <p><code>Todo.tsx</code></p>
  <pre><code>type Todo = {
    todo: TodoProps;
  };
  
  const Todo = ({ todo }: Todo) : JSX.Element =&gt; {
    const [isEditing, edit] = useState&lt;boolean&gt;(false);
    const dispatch = useDispatch();
  
    if (!isEditing) {
      return (
        &lt;TodoDiv&gt;
          &lt;Li
            key={todo.id}
            completed={todo.completed}
            onClick={() =&gt; dispatch(completeTodo(todo.id))}
            // style={{
            //   textDecoration: todo.completed ? &quot;line-through&quot; : &quot;none&quot;
            // }}
          &gt;
            {todo.text}
          &lt;/Li&gt;
          &lt;TodoBttns&gt;
            &lt;Button edit onClick={() =&gt; edit(!isEditing)}&gt;
              &lt;img src={editBttn} alt=&quot;Edit Button&quot; /&gt;
            &lt;/Button&gt;
            &lt;Button delete onClick={() =&gt; dispatch(deleteTodo(todo.id))}&gt;
              &lt;img src={deleteBttn} alt=&quot;Delete Button&quot; /&gt;
            &lt;/Button&gt;
          &lt;/TodoBttns&gt;
        &lt;/TodoDiv&gt;
      );
    } else {
      return (
        &lt;FormEdit&gt;
          &lt;InputForm key={todo.id} {...{ todo, edit }} /&gt;
        &lt;/FormEdit&gt;
      );
    }
  };
  </code></pre>
  <p>and the TodoProps interface is the following:</p>
  <pre><code>interface TodoProps {
    text: string;
    completed: boolean;
    id: string;
  }
  </code></pre>
  <p>already tried the fix of wraping the map items with fragments, but I still can't make it work. The only thing that as of now is fixing the issue is declaring at the top of <code>Todos.tsx</code> as this <code>function Todos(): any</code></p>
  <p>As a side note: I'm using Styled Components, but I don't think the issue is related to the library.</p>