Simulating a Div Click on Enzyme and React

I'm learning Enzyme, and I've been starting to write some tests on an application a team has written. I'm attempting to simulate clicking an element. The application basically have a list, and whenever you click on it, (an image of) a check-mark appears. If you click again, (an image of) no check mark appears. The application does this by changing the state whenever you click the element, which then determines which image to render.

It works on the actual application, but somehow Enzyme is failing. Is there something I'm missing with respect to Enzyme?

Below is some simplified code. Here is the class:

class RecipeInfo extends Component {

  constructor(props) {
    super(props);
    this.state = {};
    this.doneClick = this.doneClick.bind(this);
  }

  doneClick(event) {
    let index = event.target.name;
    let state = {};
    state[index] = !this.state[index];
    this.setState(state)
  }

  renderIngredients(ingredients) {
   let quantities = ingredients.quantity;
   let lines = [];
   for(let i = 0; i < quantities.length; i++){
     lines.push(
      <div className='flex-body-ingredients' key={i}>
        <div onClick={this.doneClick} id={i} >
        {this.state[i] ? 
          (<img className='empty-check' src="/assets/success.png" alt="success" name={i} />)
          : (<img className='empty-check' src="/assets/oval.png" name={i} alt="oval" />)}
        </div>
      </div>
       )
     }
     return lines.map((line) => line)
   }

  render() {
    return (
      {this.renderIngredients(ingredients)}
    )
  }
}

function mapStateToProps(state) {
  return {
    recipe: state.recipes.selectedRecipe
  }
}
export default connect(mapStateToProps, actions)(RecipeInfo);

And below is the test I just wrote:

describe('Recipe Info', () => {
  const recipeInfo = mount(<Provider store={createRecipeStore}><RecipeInfo/></Provider>);

  it('shows a click and then hides the click when clicking an ingredient', () => {
    let notChecked = recipeInfo.find('[alt="oval"]').first();
    expect(notChecked).toBeDefined();

    recipeInfo.find('.flex-body-ingredients').first().childAt(0).simulate('click');

    const checked = recipeInfo.find('[alt="success"]').first();
    expect(checked).toBeDefined();
  });

When I run the test, and I console log the element, I see the following:

<div id="0"><img class="empty-check" src="/assets/oval.png" name="0" alt="oval"></div>

This never changes after the click.