Lightbox only opens on second click

[brennooth]

I'm currently facing the issue that I have 8 buttons that open one and the same lightbox component with varying props. The documentary states that props are not reactive and that the key prop should be used to unmount and remount the lightbox. However, now I'm facing the issue that with an introduced key prop, I need two clicks for the lightbox to open and I simply can't figure out what i'm missing.

 <FsLightbox
      toggler={this.state.toggler}
      sources={this.state.category.categoryA.map(o => o = <img src={o} />)}
      key={this.state.selectedCategory}
  />

The state of toggler and selectedCategory changes at the same time when clicking on each button.

When I'm not using the key prop, the lightbox opens on the first click, but later on crashes when the number of images to be displayed changes. Any ideas what could be causing this? We're out of ideas since we think we're using this according to the provided documentation. Thanks!

[akira108]

How do you invoke setToggler? In my case with setToggler(!toggler) as shown in the document, Same issue happened. We need to make sure to invert current state correctly by using first argument of the set function like setToggler(prev => !prev).