Angular Custom Pipe: SafeValue must use [property]=binding

Question

This is my CustomPipe Code:

Here , text is a big chunk of string. And searchColl is the collection of words which needs to be highlighted in it.

This is working well and highlighting all the words in the text, but it appends "SafeValue must use [property]=binding" on the rendered text like this:

transformAddress(text: any, searchColl) {
    searchColl.forEach(search => {
        if (search !== undefined && search !== null) {
            search = search.toString().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
          }
          text += '';
          var tempText =  this._sanitizer.bypassSecurityTrustHtml(search ? text.replace(new RegExp(`(${search})`, 'gi'),
            '<span style="background-color: blue">' + `$1` + '</span>') : text);
          text = tempText; // After 1st word from collection is highlighted search this becomes the new input.
    });

     return   this._sanitizer.bypassSecurityTrustHtml(text);
    
}

This is how I am using it in my component code:

var retPipeData = this.highlightPipe.transformAddress(source,itemsToSearch);
console.log('DataFromPipe', retPipeData);
// var massagedData = retPipeData.toString().replace('SafeValue must use [property]=binding:','');
// var massagedHTML = this.sanitizer.sanitize(SecurityContext.HTML,this.sanitizer.bypassSecurityTrustHtml(massagedData));
// console.log('massagedDataAfterreplace', massagedData);
// console.log('massagedHTML', massagedHTML);

this.tab1Response = retPipeData;

I was also trying to remove this string from the string received from Pipe but that is also not working ( see commented code above).

Also, I even tried:

this._sanitizer.sanitize(SecurityContext.HTML,this._sanitizer.bypassSecurityTrustHtml(text))

But no success.

Can someone please point out what iam doing wrong.