[SOLVED] After upgrading PrimeFaces 6.2 to 12 the <p:messages autoUpdate="true"> does not show up anymore

We have upgraded JSF from 2.2 to JSF-4.0 (jakarta-faces-4.0.5)
And Primefaces from 6.2 to 12.0.0-jakarta

we made changes according to the upgrade like namespace changes and attribute value changes everything works fine. But, we are facing validation messages issue on the screen while doing some validation checks like inputfield fillings.
This is my period.xhtml with inputfield code

<h:panelGroup> 
<my:inputField propertyName="periodNumber" style="width:120px" 
id="periodNumber" maxlength="10" 
componentname="#{labels.periodNumber}" 
value="#{periodController.currentPeriod.periodNumber}" 
valueChangeListener="#{periodsController.loadPeriodDetails}" 
update=":securityPage:period:periodDetails :securityPage:period:periodInfo :securityPage:period:type 
 :securityPage:period:periodType:periodTypes " /> 
 </h:panelGroup>

I am using a custom component my:inputfield and this is .xhtml file looks like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="jakarta.faces.html"
    xmlns:f="jakarta.faces.core"
    xmlns:c="jakarta.tags.core"
    xmlns:cc="jakarta.faces.composite"
    xmlns:p="http://primefaces.org/ui">


<cc:interface>
    <cc:attribute name="value" required="false" />
    <cc:attribute name="propertyName" required="true" />
    <cc:attribute name="readonly" required="false" default="false" />
    <cc:attribute name="disabled" required="false" default="false" />
    <cc:attribute name="maxlength" required="false" default="20" />
    <cc:attribute name="onblur" required="false" />
    <cc:attribute name="onfocus" required="false" />
    <cc:attribute name="onchange" required="false" />
    <cc:attribute name="onstart" required="false" />
    <cc:attribute name="mandatory" required="false" default="false" />
    <cc:attribute name="securitycomponent" required="false" />
    <cc:attribute name="style" required="false" />
    <cc:attribute name="minvalue" required="false" />
    <cc:attribute name="maxvalue" required="false" />
    <cc:attribute name="mask" required="false" />
    <cc:attribute name="flags" required="false" />
    <cc:attribute name="securitycomponent" required="false" />
    <cc:attribute name="size" required="false" />
    <cc:attribute name="componentname" required="false" />
    <cc:attribute name="styleClass" required="false" />
    <cc:attribute name="rendered" required="false" />
    <cc:attribute name="valueChangeListener" required="false"
        method-signature=" void listener()" />
    <cc:attribute name="update" required="false" default="@none" />
    <cc:attribute name="process" required="false" default="@this" />
    <cc:attribute name="notValid" required="false" default="false" />
    <cc:attribute name="required" required="false" />
    <cc:attribute name="requiredMessage" required="false" />
    <cc:attribute name="type" required="false" default="text" />
    <cc:attribute name="pattern" required="false" />
    <cc:attribute name="title" required="false" />
</cc:interface>

<cc:implementation>
    <c:set var="styleClassVal"
        value="my-inputfield ${not empty cc.attrs.styleClass?cc.attrs.styleClass:''} ${cc.attrs.mandatory ? 'my-mandatoryfield' : ''} ${cc.attrs.notValid ? 'ui-state-error' : ''}"></c:set>
        <p:inputText minvalue="#{cc.attrs.minvalue}"
        label="#{cc.attrs.componentname}" maxvalue="#{cc.attrs.maxvalue}"
        size="#{cc.attrs.size}" value="#{cc.attrs.value}"
        id="#{cc.attrs.propertyName}" name="#{cc.attrs.propertyName}"
        maxlength="#{cc.attrs.maxlength}" onchange="#{cc.attrs.onchange}" title="#{cc.attrs.title}"
        rendered="#{cc.attrs.rendered}"
        onblur="setFieldStyle('#{cc.clientId}:#{cc.attrs.propertyName}', 'formtext', false);#{cc.attrs.onblur};"
        onfocus="setFieldStyle('#{cc.clientId}:#{cc.attrs.propertyName}', 'formtextactive', true);#{cc.attrs.onfocus}"
        readonly="#{cc.attrs.readonly}" disabled="#{cc.attrs.disabled}"
        style="#{cc.attrs.style}"
        styleClass="${cc.attrs.disabled ? 'my-disabledinput' :styleClassVal} ${cc.attrs.mandatory ? 'my-mandatoryfield' : ''} ${cc.attrs.readonly ? 'my-readonlyfield' : ''}"
        required="#{cc.attrs.required}" requiredMessage="#{cc.attrs.requiredMessage}" type="#{cc.attrs.type}">
        <c:if test="#{not empty cc.getValueExpression('valueChangeListener')}">
            <p:ajax listener="#{cc.attrs.valueChangeListener}"
                onstart="#{cc.attrs.onstart}" event="valueChange"
                update="#{cc.attrs.update}" process="#{cc.attrs.process}" />
        </c:if>
        <c:if test="#{!empty cc.attrs.pattern}">
        <f:convertDateTime pattern="#{cc.attrs.pattern}" for="@this"></f:convertDateTime>
        </c:if>
    </p:inputText>
    
</cc:implementation>

</html>

An there is p:message in my layout.xhtml where ui:composition template given in my period.xhtml

                    <td style="vertical-align: top" width="100%">
                        <div class="content">
                            <p:messages autoUpdate="true"></p:messages>
                            <ui:insert name="content">
                                Default my Content
                            </ui:insert>
                        </div>
                    </td>

I have tried adding ajax="true" and making update="@form" and i tried checking weather the message is getting from back-end or not by adding <p:messages id="messages" globalOnly="false" /> I found the messages is getting and displaying in page also.