Enzyme does not pick up added node after click

I have a component that, when a div is clicked, it renders a dropdown to select from. However, I'm having trouble and will explain further with code below:

In my Dropdown.js component file I have:

const Dropdown = ({ caption, open, toggle, children }) => (
  <div className={`${open ? 'up' : 'down'}`} onClick={toggle}>
    <span className="caption">{caption}</span>
    <Icon type={open ? 'up' : 'down'} />
    {open && (
      <div className="dropdown">
        {children}
      </div>
    )}
  </div>
)

open is a state set to false, and toggle is a handler that sets the state of open to true (or false if state is true) if it's triggered.

In my Dropdown.test.js file I have:

describe('Dropdown Functions', () => {
  let tree, bareTree
  const mockClickFn = jest.fn(() => selected = 'Alberta')
  const item = <Item key='AB' onClick={() => {}}>Alberta</Item>

  beforeEach(() => {
    tree = mount(<Dropdown children={item}/>)
  })

  it('renders dropdown item', () => {
    console.log(bareTree.html());
    console.log(bareTree.find('span'));
    console.log(bareTree.find('span').html());
    console.log(bareTree.find('i'));
    console.log(bareTree.find('i').html());
    console.log(bareTree.find('div.dropdown'));

    bareTree.simulate('click')

    console.log(bareTree.html());
    console.log(bareTree.find('span'));
    console.log(bareTree.find('span').html());
    console.log(bareTree.find('i'));
    console.log(bareTree.find('i').html());
    console.log(bareTree.find('div.dropdown'));

  })
})

The console.logs produce this in my terminal:

  ● Console

    //console.log(bareTree.html());
      <div class="sc-bwzfXH iRxfsh down"><span class="caption"></span><i class="anticon anticon-down"></i></div>

    //console.log(bareTree.find('span'));
      ReactWrapper { length: 1 }

    //console.log(bareTree.find('span').html());
      <span class="caption"></span>

    //console.log(bareTree.find('i'));
      ReactWrapper { length: 1 }

    //console.log(bareTree.find('i').html());
      <i class="anticon anticon-down"></i>

    //console.log(bareTree.find('div.dropdown'));
      ReactWrapper { length: 0 }

    //console.log(bareTree.html());
      <div class="sc-bwzfXH iRxfsh up"><span class="caption"></span><i class="anticon anticon-up"></i><div class="dropdown"><div class="sc-bdVaJa gFwDpq">Alberta</div></div></div>

    //console.log(bareTree.find('span'));
      ReactWrapper { length: 1 }

    //console.log(bareTree.find('span').html());
      <span class="caption"></span>

    //console.log(bareTree.find('i'));
      ReactWrapper { length: 1 }

    //console.log(bareTree.find('i').html());
      <i class="anticon anticon-up"></i>

    //console.log(bareTree.find('div.dropdown'));
      ReactWrapper { length: 0 }

As you can see, though the div is showing up after the click simulation, the dropdown still has a length of 0.