Dom is not removed when unmounting for Layer components

This might be related to issue #3623.

So I created a Modal component that accepts a props of boolean. If props is false the component will not render anything, if props is true it should render the Layer component along with its children.

Upon running the test with props to true, the test will pass correctly. But, upon adding a second test to check if the Modal component renders - it fails.

Expected Behavior

Test should pass and should not see the Modal component on the DOM.

Actual Behavior

Tests fails if the previous.

URL, screen shot, or Codepen exhibiting the issue

You can check the repository here

OR just add this code.

// Modal.js
import React from 'react'

const Modal = ({ isOpen = false }) => {
  if (!isOpen) { return null; }

  return (
    <div data-testid='modal'>
      <span>You should see this</span>
    </div>
  )
}

export default Modal

// ModalSpec.js
import React from 'react'
import { render, cleanup } from '@testing-library/react'
import Modal from '../Modal'

describe('#Modal', () => {
  afterEach(cleanup)

  it('should be able to see the modal', () => {
    const { getByTestId } = render(<Modal isOpen={true} />)

    expect(getByTestId('modal')).toBeInTheDocument();
  })

  it('should not be able to see the modal', () => {
    const { queryByTestId } = render(<Modal isOpen={false} />)

    expect(queryByTestId('modal')).not.toBeInTheDocument()
  })
})

Steps to Reproduce

1. Clone the repository
2. Run yarn
3. Run yarn test

Your Environment

• Grommet version: ^2.9.0
• Browser Name and version: Terminal
• Operating System and version (desktop or mobile): MacOS Mojave (10.14.6)

[ShimiSun]

@mateeyow this issue is addressed on https://github.com/grommet/grommet/pull/3737, thank you for reporting.

[mateeyow]

@ShimiSun thank you.