I want to read the values of a specific list element by ID and show it on a SharePoint site.

The problem is that I tried to use the PNP Framework, but some of the components are not working any longer. Here is my code so far. I hope you can help me.

import * as React from 'react';
import styles from './Webpartprojectsw.module.scss';
import { IWebpartprojectswProps } from './IWebpartprojectswProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as jquery from 'jquery';
import { IItemAddResult, DateTimeFieldFormatType } from "@pnp/sp/presets/all";
import { spfi, SPFI, SPFx } from "@pnp/sp";
import "@pnp/sp/webs";
 import "@pnp/sp/lists";
import "@pnp/sp/items";

export interface ISolypProjectListItemsState{
    Title: string,
    ID: number,
    StartDate: string,
    EndDate:string,
    ProjectPhase: string,
    TrafficLight:string,
    message: string
  }

  export default class Webpartprojectsw extends     

 React.Component<IWebpartprojectswProps,ISolypProjectListItemsState> {

public static siteurl: string="";
public constructor(props:IWebpartprojectswProps, state: ISolypProjectListItemsState){
   super(props);
   this.state={
         Title:"",
         ID:0,
        StartDate:"",
        EndDate:"",
        ProjectPhase:"",
        TrafficLight:"",
        message:""
   };
   Webpartprojectsw.siteurl= this.props.websiteurl;
 }

 public componentDidMount()  {

    this._ReadItem();
 }



 public render(): React.ReactElement<IWebpartprojectswProps> {


  return (
   <div>
    {this.state.message}
    {this.state.Title}
   </div>      
      
  );
}
 private async _ReadItem(){
 // get a specific item by id
const item: any = await sp.web.lists.getByTitle("ProjectStatusList").items.getById(1).get();
console.log(item);
 this.setState({message:"Last Item Created Title:--> " + item.Title + item.TrafficLight});

  }
  }

Thank you very much!

Matthias