is there a way to make sub-select input in payload cms?

Question

export const PRODUCT_CATEGORIES = [
    {
      label: 'UI Kits',
      value: 'ui_kits' as const,
      subcat:[{name:'ui_kits1',value:'ui_kits1' as const},{name:'ui_kits2',value:'ui_kits2' as const}],
    },
    {
      label: 'Fonts',
      value: 'fonts' as const,
      subcat:[{name:'1',value:'lu1n1d' as const},{name:'font2',value:'font2' as const}],
      
    },]

currently doing by listing all subcat in single select field:

 {
  name: 'category',
  label: 'Category',
  type: 'select',
  options: PRODUCT_CATEGORIES.map(
    ({ label, value}) => ({ label, value })
  ),
  required: true,
},
 

{
  name:'subcat',
  label:'subcat',
  type:'select',
  options:  PRODUCT_CATEGORIES
  .filter(category => category.subcat)
  .flatMap(category => category.subcat.map(subcategory => subcategory.name))
},

is there a way to show inside subcat based on main category select? thanks!