title: You're attempting to animate multiple children within AnimatePresence, but its exitBeforeEnter prop is set to true
body: <h3>Error on Browser Console</h3>
  <pre><code>You're attempting to animate multiple children within AnimatePresence,
  but its exitBeforeEnter prop is set to true. This will lead to odd visual behaviour.
  </code></pre>
  <p><a href="https://i.stack.imgur.com/GMuOp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GMuOp.png" alt="Error Image" /></a></p>
  <h3>App.js (Enclosed within BrowserRouter)</h3>
  <pre class="lang-js prettyprint-override"><code>&lt;Switch&gt;
         &lt;AnimatePresence exitBeforeEnter&gt;
            &lt;Route key=&quot;1&quot;  exact path=&quot;/&quot; component={Home}/&gt;
            &lt;Route key=&quot;2&quot;  exact path=&quot;/home&quot; component={Home}/&gt;
            &lt;Route key=&quot;3&quot;  exact path=&quot;/articles&quot; component={Articles}/&gt;
         &lt;/AnimatePresence&gt;
   &lt;/Switch&gt;
  </code></pre>
  <h3>Home.js/Articles.js</h3>
  <pre class="lang-js prettyprint-override"><code>const Home = props =&gt;{
    return(
      &lt;motion.h1 initial={{x:-100}} animate={{x:0}} exit={{x:-100}}&gt;Home/Articles&lt;/motion.h1&gt;
    )
  }
  
  export default Articles
  </code></pre>
  <p>Can anyone explain what is causing the error?</p>