Angular 13 : Issue with button inside a Textbox

[Audhut]

I am using Angular 13 and have the below control in my html

<dx-text-box [showClearButton]="true" style="width: 400px" [(value)]="searchValue" placeholder="Search" (onEnterKey)="onSearchEnterKey($event)"> <dxi-button name="search" location="after" [options]="passwordButton">

below is the list of modules in my app.module file

DevExtremeModule,
DxMenuModule,
DxRangeSelectorModule,
DxPopupModule,
DxChartModule,
DxPieChartModule,
DxVectorMapModule,
DxDataGridModule,
DxBulletModule,
DxButtonModule,
DxTextBoxModule,
DevExtremeModule,
DxTemplateModule

i am getting the below error

**'dxi-button' is not a known element:

1. If 'dxi-button' is an Angular component, then verify that it is part of this module.
2. If 'dxi-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.**

if i remove the <dxi-button name="search" location="after" [options]="passwordButton"> , the application compiles successfully.

Note: i am using the same code with an Angular 11 application and devextreme-angular": "^20.2.4", it works perfectly there