returning undefined for the function in spfx react

Question

tried cascading drop down using 2 columns. but it keeps returning undefined. unable to setState in dropdown function

the values are returning in console, but not able to set the state

    private async test(getVal: any):promis<void> {
    ...
    
    var timePeriod = this.dropdown(getval.key);
    log(timePeriod)
    //returns undefined
    }
    
    public dropdown(val: string){
    sp.web.lists.getbytitle("").items.select("").filter("" + val + "'").getAll().the(function (data){
    log(data)
    for(var k in data){
    timePeriod.push({key:data[k].period, text: data[k].Period})
    }
    
    retur data;
    }
    
    )
    }