PNP/SP not showing all methods

[frread]

I am creating a spfx webpart using pnp/sp and react.

this webpart will get parameters from users and with those do a search in sharepoint and show all the items in a listview.

So far i was able to do this no issue.

But now i need to add to the list view the values of some custom columns that we have for the items.

I found some tutorials showing how i could achieve this, but when i try to implement this, i find some of the methods they show are not present in my code and give me errors.
For example when i try to do _sp.web the web object is not accesible

Can someone help me figure out what is wrong.

This is my pnp version

    npm ls @pnp/sp
    tag-query-generator@0.0.1 C:\dev\spfx\TagQueryGenerator
    ├── @pnp/sp@3.20.0
    ├─┬ @pnp/spfx-controls-react@3.15.0
    │ └── @pnp/sp@2.5.0
    └─┬ @pnp/spfx-property-controls@3.14.0
      ├─┬ @pnp/sp-clientsvc@1.3.11
      │ └── @pnp/sp@1.3.11 deduped
      ├─┬ @pnp/sp-taxonomy@1.3.11
      │ └── @pnp/sp@1.3.11 deduped
      └── @pnp/sp@1.3.11

this is my "config" file

    import { WebPartContext } from "@microsoft/sp-webpart-base";
    
    import { spfi, SPFI, SPFx as spSPFx } from "@pnp/sp";
    import { LogLevel, PnPLogging } from "@pnp/logging";
    
    let _sp: SPFI = null!;
    
    export const getSP = (context?: WebPartContext): SPFI => {
        if (!!context) {
            _sp = spfi().using(spSPFx(context)).using(PnPLogging(LogLevel.Warning));
        }
        return _sp;
    };

and this is my component file, please note i left most of the code out and just showing what i think was relevant

    import * as React from 'react';
    
    import styles from './TagQueryGeneratorWebPart.module.scss';
    import type { ITagQueryGeneratorWebPartProps } from './ITagQueryGeneratorWebPartProps';
    import { escape } from '@microsoft/sp-lodash-subset';
    import { SPFI } from "@pnp/sp";
    
    import { getSP } from '../../../pnpjsConfig';
    import { ISPDocument } from './interfaces';
    import { SearchQueryBuilder } from "@pnp/sp/search";
    import { IViewField, ListView, SelectionMode } from '@pnp/spfx-controls-react';
    import * as moment from 'moment';
    

    export interface ITagQueryGeneratorWebPartState {
      resultDocs: ISPDocument[];
    }
    
    export default class TagQueryGeneratorWebPart extends React.Component<ITagQueryGeneratorWebPartProps, ITagQueryGeneratorWebPartState> {
    
     private _sp: SPFI;
     private maxResults: number;
    
      constructor(props: ITagQueryGeneratorWebPartProps) {
        super(props);
        this._sp = getSP();
        this.state = {
          resultDocs: [],
        };
    
        this.maxResults = 10;
      }

    
      private handleSearch = async (): Promise<void> => {
        const searchQuery = "isDocument=True AND " + this.searchInput?.value;
    
        try {
          const builder = SearchQueryBuilder(searchQuery).rowLimit(this.maxResults);
    
          const results = await this._sp.search(builder);
    
          console.log(results.PrimarySearchResults);
          const resultDocs: ISPDocument[] = results.PrimarySearchResults.map((item) => {
            console.log(item);
            return {
                  Title: item?.Title || "",
                  FileExtension: item?.FileExtension || "",
                  Path: item?.LinkingUrl || "",
                  FileType: item?.FileType || "",
                  id: item?.UniqueId || "",
                  ModifiedBy: item?.Author || "",
                  LastUpdate: item?.LastModifiedTime || undefined,
                }
              });        
              this.setState({ resultDocs });
        
            } catch (error) {
              console.error('Error performing search:', error);
            }
          };
        
   
        }

In the searchHandler, the this._sp object only shows me 3 methods search, searchSuggest, using it does not show me any other propertie