Filter map layers using default Select component option

[MK13]

Using the Select component, I would like to pre-filter (right after the map loads) map layers based on the default value of the select component. Based on my code below, by the time the default value (serviceType) is retrieved inside UseEffect, await jmv.whenAllJimuLayerViewLoaded() is not ready so the code that filters the layers is not executed. How can I filter maps layers before any selection is made on the Select component, just using the default value?

import { React, type AllWidgetProps } from 'jimu-core'
import { type JimuLayerView, JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis'
import { Select, Option } from 'jimu-ui'
import { useEffect } from 'react'
const { useState } = React //{} allow destructuring of this constant

const Widget = (props: AllWidgetProps<any>) => {
  const [jmv, setJmv] = useState<JimuMapView>()
  const [serviceType, setServiceType] = useState('Residential Trash')
  const activeViewChangeHandler = (jimumapview: JimuMapView) => {
    if (jimumapview) {
      setJmv(jimumapview)
    }
  }
  useEffect(() => { //runs when service type is updated by useState
    FilterMapLayers(serviceType)
  }, [serviceType])
  const UpdateServiceType = (evt) => {
    setServiceType(evt.target.value)
  }
  const FilterMapLayers = async (serviceTypeString) => {
    await jmv.whenAllJimuLayerViewLoaded()
    const jimuLayerViews = jmv.getAllJimuLayerViews()
    jimuLayerViews.forEach(async (jimuLayerView) => {
      let whereClause = null
      const layer = jimuLayerView.layer
      if (layer.type === 'feature') {
        if (layer.title === 'OpenMarketSm' || layer.title === 'ExclusionZoneSm' || layer.title === 'LocalContentAreaSm') {
          whereClause = `ServiceAreaType = '${GetServiceTypeText(serviceTypeString)}'`
          await FilterLayerView(jimuLayerView, whereClause, props)
        } else if (layer.title === 'HOAsm' || layer.title === 'MunicipalitySm') {
          whereClause = GetWhereClauseMuniHOA(serviceTypeString)
          await FilterLayerView(jimuLayerView, whereClause, props)
        }
      }
    })
  }
  const GetServiceTypeText = (FilterString) => {
    switch (FilterString) {
      case 'Residential Trash':
        return 'Resi Trash'
      case 'Residential Recycle':
        return 'Resi Recycling'
      case 'Residential Yard Waste':
        return 'Resi Yard Waste'
      case 'Commercial Trash':
        return 'Comm. Trash'
      case 'Commercial Recycle':
        return 'Comm. Recycling'
      case 'Industrial Temp':
        return 'Industrial Temp'
      case 'Sanitation Services':
        return 'Sanitation Services'
    }
  }
  const GetWhereClauseMuniHOA = (FilterString) => {
    switch (FilterString) {
      case 'Residential Trash':
        return "SvcBy_ResiTrsh = 'C' or SvcBy_ResiTrsh = 'R'"
      case 'Residential Recycle':
        return "SvcBy_ResiRec = 'C' or SvcBy_ResiRec = 'R'"
      case 'Residential Yard Waste':
        return "SvcBy_ResiYW = 'C' or SvcBy_ResiYW = 'R'"
      case 'Commercial Trash':
        return "SvcBy_CommTrsh = 'C' or SvcBy_CommTrsh = 'R'"
      case 'Commercial Recycle':
        return "SvcBy_CommRec = 'C' or SvcBy_CommRec = 'R'"
      case 'Industrial Temp':
        return "SvcBy_IndsTemp = 'C' or SvcBy_IndsTemp = 'R'"
      default:
        return ''
    }
  }

  async function FilterLayerView (jimuLayerView: JimuLayerView, whereClause: any, props: AllWidgetProps<any>) {
    let datasource = null
    if (jimuLayerView.layerDataSourceId) {
      datasource = await jimuLayerView.createLayerDataSource()
    }
    if (datasource) {
      datasource.updateQueryParams({
        where: whereClause
      }, props.widgetId)
    }
  }
  return (
      <div>
      <Select aria-label="Name" value = {serviceType} onChange={UpdateServiceType}>
        <Option value = "Residential Trash">Residential Trash </Option>
        <Option value = "Residential Recycle">Residential Recycle </Option>
        <Option value = "Residential Yard Waste">Residential Yard Waste </Option>
        <Option value = "Commercial Trash">Commercial Trash </Option>
        <Option value = "Commercial Recycle">Commercial Recycle </Option>
        <Option value = "Industrial Temp">Industrial Temp </Option>
        <Option value = "Sanitation Services">Sanitation Services </Option>
      </Select>
      <div>
  {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 &&
        (<JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler}/>)}
      </div>
      </div>
  )
}

export default Widget

//activeViewChangeHandler is called once when the map is ready
// {/* ?. checks if object is null  */}

  @QunSun 

[MK13]

@QunSun