Popover is not closing when clicking outside in fluent ui

I am using fluent ui popover component in my react app. When I am clicking outside the popover component it is not closing. Although in the documentation, the same code is working as expected. Here is my code snippet

                <Popover open={isFailurePopoverOpen} positioning={"below"} trapFocus>
                    <PopoverTrigger>
                        <Button>{"abc"}</Button>
                    </PopoverTrigger>
                    <PopoverSurface style={{ padding: "0px" }}>
                        <FailurePopupContent />
                    </PopoverSurface>
                </Popover>

I have also tried to use only empty <div> component instead of button inside PopoverTrigger, also tried to remove the whole PopoverTrigger.

Here is the documentation link - here.

How can I make it work? Am I doing something wrong? Am I missing something?

Since the popover was controlled by isFailurePopoverOpen and it is a react state, that's why it was not able to close on outside click. By removing the controlled variable isFailurePopoverOpen, the popover is working as expected.