primefaces: 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