Uncontrolled Popover reactstrap updating state

Question

here i am using uncontrolled popover of reactstarp and i have list of categories and i have one edit button option so when i click on edit button icon uncontrolled popover appears that true but now thing is like when i click on below of the categories it opens where the popover opens at first position and when i clicked again then it is visible perfectly as what i need. i did something like this :

<span
 className="material-icons-outlined icon icon-fs-16 text-primary cursor-pointer mr-6px"
 id={`add-edit-category-subcategory_${category.id}`}
 onClick={() => {
 this.changestatesStatus(
 category,
 `add-edit-category-subcategory_${category.id}`
 );  }}
 >
 edit
 </span>
<UncontrolledPopover
 className="custom-popover subcategory-popover"
 placement="right"
 trigger="legacy"
 isOpen={this.state.showPopover}
 target={this.state?.popoverId}
>

changestatesStatus = (category, id) => {
    console.log("id: ", id);
    this.setState(
      {
        showPopover: true,
        isEdit: true,
        category: category,
        popoverId: id,
      },

Answer 1

I solved this by checking showPopover is true in condition

{this.state.showPopover && (