Use useId() hook in Popover

[martin8877]

• components: Popover
• reactstrap version 9.2.2
• import method umd/csj/es
• react version 18.2.0
• bootstrap version 5.3.2

What is happening?

Cannot use standard react hook useId() as target identifier in <Popover />

What should be happening?

The result of useId() hook should be used as Popover target ID. The 'querySelectorAll' should be escaped with CSS.escape().

Error message in console

react-dom.development.js:22689 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': ':r0:' is not a valid selector.
    at findDOMElements (http://localhost:3001/admin/static/js/bundle.js:261363:30)
    at getTarget (http://localhost:3001/admin/static/js/bundle.js:261386:13)
    at TooltipPopoverWrapper.updateTarget (http://localhost:3001/admin/static/js/bundle.js:260236:72)
    at TooltipPopoverWrapper.componentDidMount (http://localhost:3001/admin/static/js/bundle.js:260019:12)
    at commitLayoutEffectOnFiber (http://localhost:3001/admin/static/js/bundle.js:206289:34)
    at commitLayoutMountEffects_complete (http://localhost:3001/admin/static/js/bundle.js:207652:13)
    at commitLayoutEffects_begin (http://localhost:3001/admin/static/js/bundle.js:207638:11)
    at commitLayoutEffects (http://localhost:3001/admin/static/js/bundle.js:207576:7)
    at commitRootImpl (http://localhost:3001/admin/static/js/bundle.js:209783:9)
    at commitRoot (http://localhost:3001/admin/static/js/bundle.js:209651:9)

Code

import { useId, useState } from 'react';
import { Popover } from 'reactstrap';

const Example = () => {
    const [isOpen, setOpen] = useState(false);
    const toggle = () => {
        setOpen(open => !open);
    }

    const id = useId();

    return (
        <div>
            <button type="button" id={id} onClick={toggle}>
                Open
            </button>
            <Popover placement="bottom" trigger="legacy" target={id} isOpen={isOpen} toggle={toggle} >
                Hello
            </Popover>
        </div>
    );
};