BlockUI: widgetVar is reset to null after partial updates

I am using Primefaces 11, and I am adding this components in home.xhtml page:

<p:dataTable id="dataTable" var="n" value="#{homeBean.dataMedel}" lazy="true" paginator="true" rows="10"
             paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {NextPageLink} {RowsPerPageDropdown}" 
             sortOrder="descending" rowsPerPageTemplate="10,15,20,30,50">

<p:blockUI widgetVar="bui" block="dataTable" animate="false">
     <p:graphicImage value="ajax_loader.gif"/>
</p:blockUI>

<h:selectOneMenu id="filterTopic" value="#{filterBean.topic}" label="topic" title="topic"
    <p:ajax event="change" update="dataTable" onstart="PF('bui').show();" oncomplete="PF('bui').hide()"
            listener="#{homeBean.onPreRender}"/>
    <f:selectItems value="#{topicBean.topicList}"/>
</h:selectOneMenu>

when I select one of the items in filterTopic menu, the ajax_loader.gif should fall on the dataTable until the data is fetch from homeBean. but it`s not working and i can see in the console the following error:

Widget for var ‘bui’ not available! --> core.js.xhtml?ln=primefaces&v=11.0.0:18

home.xhtml Uncaught TypeError: Cannot read properties of null (reading ‘hide’) --> home.xhtml

also when refresh page and run PrimeFaces.widgets in browser console, result is:

 bui: c {_super: undefined, cfg: {…}, id: 'form:j_id_bo', jqId: '#form\\:j_id_bo', jq: S.fn.init(1), …}

but when select one of the items in filterTopic menu, bui value set to null:

 bui: null

also this code worked with primefaces 10

[melloware]

I think #5866 is related and was never solved

[melloware]

OK i see why its happening its because the BlockUI panel jq object gets created inside the panel. So when the panel is removed from the DOM so it he BlockUI Mask which causes the widget to be marked for removal.