Create cascade dropdowns using SPFX React

Question

I am new to SPFX. I am trying to build a web part property pane where there are 2 dropdowns. one has the lists in the current site and another one will populate the items inside the list selected in the dropdown.

Following is my code I am not getting anything in the second dropdown

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  PropertyPaneTextField,PropertyPaneDropdown,IPropertyPaneDropdownOption
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
   

import{SPHttpClient,SPHttpClientResponse } from '@microsoft/sp-http';

import * as strings from 'ThewebpartWebPartStrings';
import Thewebpart from './components/Thewebpart';
import { IThewebpartProps } from './components/IThewebpartProps';



export default class ThewebpartWebPart extends BaseClientSideWebPart<IThewebpartProps> {

  private _siteLists:string[];
  private alllistitems:IPropertyPaneDropdownOption[];
  private itemsDropdownDisabled: boolean = true;

  public render(): void {
    const element: React.ReactElement<IThewebpartProps> = React.createElement(
      Thewebpart,
      {
        description: this.properties.description,
        webURL:this.context.pageContext.web.absoluteUrl,
        sitelist:this.properties.sitelist,
        listitems:this.properties.listitems
   
        
      }
    );

    ReactDom.render(element, this.domElement);
  }

  private async _getSiteLists():Promise<string[]>{
    const endpoint: string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists?$select=Title%20&$filter=Hidden eq false &$orderby=Title &$top=10`;
    
    const rawResponse:SPHttpClientResponse= await     this.context.spHttpClient.get(endpoint,SPHttpClient.configurations.v1);
    return (await rawResponse.json()).value.map(
      (list:{Title:string})=>{

        return list.Title;


      }
    );
  }

  private async _getlistitems(listname:string):Promise<string[]>{
    console.log("items")
  const endpoint:string=`${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('${listname}')/items?$select=Title`;
  const rawResponse:SPHttpClientResponse=await this.context.spHttpClient.get(endpoint,SPHttpClient.configurations.v1);

  console.log(endpoint);


  return(await rawResponse.json()).value.map(
    (list:{Title:string})=>{
      return list.Title;
    }
    );
  }

  protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {

    if(propertyPath='listitems' && newValue)
    {
     
      this.itemsDropdownDisabled=false;      
      const allistitems=  this._getlistitems(propertyPath);
      
      super.onPropertyPaneFieldChanged(propertyPath,oldValue,newValue);
      this.context.propertyPane.refresh();
      this.render();
    }
    else{
      console.log("oldvalue");

      super.onPropertyPaneFieldChanged(propertyPath,oldValue,oldValue);

      console.log("oldvalue::" + oldValue);
    }
    
  }
  

 protected async onInit(): Promise<void> {
         
    this._siteLists=await this._getSiteLists();        

    return super.onInit();
  }





  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                }),
                PropertyPaneDropdown('sitelist',{
                  label:'Lists in Current Site',
                  options:this._siteLists.map((list:string)=>{
                    return<IPropertyPaneDropdownOption>{key:list,text:list}


                  })
                }),
                  PropertyPaneDropdown('listitems',{
                    label:'Selected Items',
                    options:this.alllistitems,
                    disabled:this.itemsDropdownDisabled                    
  
                    })



              ]
            }
          ]
        }
      ]
    };
  }
}

The second dropdown is visible but it doesn't have any items inside. when I look at the console this is what I get the allitems lists value returns alllsititemsare:[object Promise]