SPFX > pnp.sp reference in React project

Tried that but no luck sofar. Maybe my code is wrong in some way. I just copied it from my working project. Like this:

import { default as pnp, ItemAddResult, Web } from "sp-pnp-js";
import { SearchQuery, SearchResults } from "sp-pnp-js";

import * as React from 'react';
import styles from './Reactsearch.module.scss';
import { IReactsearchProps } from './IReactsearchProps';
import { escape } from '@microsoft/sp-lodash-subset';

export default class Reactsearch extends React.Component<IReactsearchProps, {}> {
  
  private GetSearchresults(): void {
    pnp.sp.search(<SearchQuery>{
     Querytext: "ContentType:TEST_matters",
     RowLimit: 10,
     EnableInterleaving: true,
     SelectProperties: ["RefinableString10", "CreatedBy","Created"], 
     RefinementFilters: ["RefinableString18:equals('false')"],
     }).then((result: SearchResults) => {
       var props = result.PrimarySearchResults;
       debugger;
   
    var propValue = "";
    var counter = 1;
    props.forEach(function(object) {
    propValue += counter++ +'. Title - ' +object.RefinableString10 +"<br/>"+"Rank - " + object.Rank
     +"<br/>"+"File Type - " + object.FileType+"<br/>"+ "Original Path - "
     +object.OriginalPath +"<br/>"+" Summary - "+ object.HitHighlightedSummary +
     "<br/>"+"<br/>";
    });
    document.getElementById("spSearchresults").innerHTML = propValue;
    }).catch(function(err) {
    console.log("Error: " + err);
    });
   
    }



  public render(): React.ReactElement<IReactsearchProps> {
    return (
      <div className={styles.reactsearch}>
        <div className={styles.container}>
          <div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
            <div className="ms-Grid-col ms-lg10 ms-xl8 ms-xlPush2 ms-lgPush1">
              <span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
              <p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
              <p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
              <a href="https://aka.ms/spfx" className={styles.button}>
                <span className={styles.label}>Learn more</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

This is the .tsx file. I also did the same import in the webpart.ts file.