I created an TextControl inside Popover component, which opens when block toolbar button is pressed. It works fine, with one annoying problem. When user types in TextControl, React redraw of component is triggered and annoying Popover animation happens on each typed character. This does not happen in LinkControl component, which also has Popover as top component. How to achieve this, I could not figure it out from the Gutenberg code? In my excerpt from the code, you’ll see that I tried to prevent re-rendering with ref, but without success. I could set animate prop on Popover to be disabled upon text is entered in Textcontrol, but his is not how LinkControl works.

...
    const [isInputDialogVisible, setIsInputDialogVisible] = useState(false);
    // attempt to prevent re-rendering
    const focusOnMount = useRef( 'firstElement' );
    const InputNameDialog = () =>
        <Popover
            onClose={() => { setIsInputDialogVisible(false) }}
            focusOnMount={focusOnMount.current}
        >
            <TextControl
                className="name-attribute"
                label={ _x('Control name', 'Popup control name', 'namespace') }
                help={ _x('This is title of field', 'Popup help text', 'namespace') }
                value={ attributes.nameAutoSet ? '' : attributes.name }
                onChange={ (name) => setName({ name }) }
            />
        </Popover>

...
            <BlockControls group="block">
                <ToolbarButton
                    onClick={() => { setIsInputDialogVisible(true) }}
                    icon="nametag"
                >
                    { isInputDialogVisible && <InputNameDialog /> }
                </ToolbarButton>
            </BlockControls>
...

So, my question is how to set up the code so it works as LinkControl, preventing redrawing of the component when text is entered in TextControl?