title: How to use Suspense with React-Router-Dom v6?
body: <p>I'm trying to migrate react-router-dom from v5 to v6 and I'm having a trouble, here is my implementation with using <code>Suspense</code></p>
  <pre><code>&lt;Suspense
     fallback={
       &lt;div className=&quot;center-div&quot;&gt;
          &lt;LoadingDots /&gt;
       &lt;/div&gt;
     }
  &gt;
      &lt;Routes&gt;
          {routes.map((route, index) =&gt; (
             &lt;Route
                path={route.path}
                key={route.path}
                element={lazy(() =&gt; import(&quot;./features/apps/AppsListPage&quot;))} //it is route.component but for simplify example i'm show it like this
            /&gt;
          ))}
      &lt;/Routes&gt;
  &lt;/Suspense&gt;
  </code></pre>
  <p>can someone tell me why browser return me this kind of error?</p>
  <pre><code>index.tsx:13 Error: Objects are not valid as a React child (found: object with keys {$$typeof, _payload, _init}). If you meant to render a collection of children, use an array instead.
  </code></pre>
  <p>I think that it caused by using <code>lazy</code> in <code>element</code> prop, but can i fix this?</p>
  <p>Thanks for any help!</p>