Lock does not display the second time the page is rendered

Help
1

I’m using auth0-lock 11.16.0. I have the following code, which is loaded on route /login. auth.login() essentially calls lock.show(). I’ve initialized lock with the option of container=“login-container”. This works fine on the first load. But if I navigate away and navigate (with BrowserRouter) back to /login, all I get is an empty box. ‘render’ is logged in console so lock.show() does get called. I’ve been scratching my head for the last 2 hours so any help is appreciated!

import React, { useEffect } from 'react'
import {
  Container, Card, CardBody, Row,
} from 'reactstrap'

import auth from '../auth'

const Login = () => {
  useEffect(() => {
    console.log('render')
    auth.login()
  })

  return (
    <Container className="mt-5">
      <Row className="d-flex flex-row justify-content-center">
        <Card>
          <CardBody id="login-container" className="p-3" />
        </Card>
      </Row>
    </Container>
  )
}

export default Login
2

For whom may have the same trouble, you will need to call lock.hide() when you navigate away. Would be good if this can be documented in show/hide APIs.