ModernUI fields not showing

import {
    PXFieldState,
    PXFieldOptions,
    linkCommand,
    controlConfig,
} from "client-controls";
import { POOrder } from "src/screens/PO/PO301000/PO301000";


export interface POOrder_UsrSalesRepID extends POOrder { }

export class POOrder_UsrSalesRepID{
    UsrSalesRepID: PXFieldState<PXFieldOptions.CommitChanges>;

}

<template>

    <field after="#fsColumnB-Order [name='OwnerID']" name="UsrSalesRepID"></field>
</template>

This is my code. It doesnot show on the UI
But this other code  similar shows the field on the UI
 

import {
    PXFieldState,
    PXFieldOptions,
    linkCommand,
    controlConfig,
} from "client-controls";
import { POOrder } from "src/screens/PO/PO301000/PO301000";

export interface POOrder_Requisition extends POOrder { }

export class POOrder_Requisition{
    @controlConfig({allowEdit: true, })
    UsrRelatedRequisitionCD : PXFieldState<PXFieldOptions.CommitChanges | PXFieldOptions.Disabled>;
}

<template>
    <field after="#fsOrderInfo-Other [name='BranchID']" name = "UsrRelatedRequisitionCD" config-allow-edit.bind="true" ></field>
</template>