title: PublicRoute is not a Route component. All component children of Routes must be a Route or React.Fragment
body: <p>i am getting below error
  [PublicRoute] is not a  component. All component children of  must be a  or &lt;React.Fragment&gt;
  my code is like this
  PublicRoute.js is</p>
  <blockquote>
  <pre><code>    import React from &quot;react&quot;;
  import { Route } from &quot;react-router&quot;;
  
  export default function PublicRoute(props) {
    return &lt;Route {...props} /&gt;;
  </code></pre>
  </blockquote>
  <pre><code>}
  </code></pre>
  <p>App.js is</p>
  <pre><code>&gt;  import &quot;./App.css&quot;; import Navbar from &quot;./components/common/Navbar&quot;;
  &gt; import { Routes } from &quot;react-router&quot;; import PublicRoute from
  &gt; &quot;./components/common/PublicRoute&quot;; import Home from
  &gt; &quot;./components/Home&quot;;
  &gt; 
  &gt; function App() {   return (
  &gt;     &lt;div&gt;
  &gt;       &lt;Navbar /&gt;
  &gt;       &lt;Routes&gt;
  &gt;         &lt;PublicRoute path=&quot;/&quot; element={&lt;Home /&gt;} exact /&gt;
  &gt;       &lt;/Routes&gt;
  &gt;     &lt;/div&gt;   ); }
  &gt; 
  &gt; export default App;
  </code></pre>
  <p>How can i solve above issue ?
  For ref please find the attached image
  <a href="https://i.stack.imgur.com/OZD4A.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OZD4A.jpg" alt="enter image description here" /></a></p>