When to use HOC and when to use a wrapper component?

Question

React

For example, I have a list of routes like this:

<Switch>
  <Route path="/login" component={Login}/>
  <Route path="/register" component={Register}/>
  <Route path="/recover" component={Recover}/>
</Switch>

I need to convert each of the routes to the following form:

<motion.div exit="false">
  <Route path="/register" component={Register}/>
</motion.div>

How to do it more correctly without duplication?

Using hoc?

const withMotion = children => (
  <motion.div exit="unset">
    {children}
  </motion.div>
)

<Switch>
  [
    withMotion(<Route path="/login" component={Login}/>),
    withMotion(<Route path="/register" component={Register}/>),
    withMotion(<Route path="/recover" component={Recover}/>),
  ]
</Switch>

Or just create a wrapper component?

const MotionRoute = props => (
  <motion.div>
    <Route {...props}/>
  </motion.div>
)

<Switch>
  <MotionRoute path="/login" component={Login}/>
  <MotionRoute path="/register" component={Register}/>
  <MotionRoute path="/recover" component={Recover}/>
</Switch>

Or are there any other options?