title: How to create customRouteWrapper for Route in React Router v6?
body: <p>I need to have a customWrapper for my Route in react-router v6 because I need to pass different props and layouts. before that in v5 I didn't have issue in create a custom function that returns a <code>Route</code> and I use that function inside <code>Routes</code> but in v6 I got this error:</p>
  <pre><code>Error: [RouteWrapper] is not a &lt;Route&gt; component. All component children of &lt;Routes&gt; must be a &lt;Route&gt; or &lt;React.Fragment&gt;
  </code></pre>
  <p>I tried to use fragments inside Routes but no luck same error shows up.
  here's my implementation:</p>
  <pre class="lang-js prettyprint-override"><code>return (
          &lt;Layout {...layoutProps} onAnimationEnd={onAnimationEnd} isInTransitionStage={isInTransitionStage}&gt;
              &lt;Routes location={displayLocation}&gt;
                  &lt;React.Fragment&gt;
                      &lt;RouteWrapper
                          path='/'
                          // component={HomePage}
                          layout={MainLayout}
                          setLayout={setLayout}
                          setLayoutProps={setLayoutProps}
                      /&gt;
                  &lt;/React.Fragment&gt;
              &lt;/Routes&gt;
          &lt;/Layout&gt;
      );
  };
  
  const RouteWrapper = ({path, component, layout}) =&gt; {
      return &lt;Route path={path} element={layout} /&gt;;
  };
  
  </code></pre>