two select option fields, where one is dependent on the other

[ivanvinicius]

In my multi step form, I have two Select Options fields. First is categories, and the seconds is subcagories.

// OBS: On database the categories and subcategories are in the same table, and their primary keys are referenced by id and parent_id.
export interface Category {
  id: string
  name: string
  parent_id: string | null
  parent_name: string | null
}

// Multi step first component
export function StepOne({ categories }: Props) {
const [categoryValue, setCategoryValue] = useState('')

 // To show just the categories ( Drinks for example) I filter where the parent_id is null
const categoriesOptions = categories
  .filter((category) => category.parent_id === null)
  .map(
    ({ id, name }) =>
      ({
        value: id,
        description: name,
      } as CustomSelectOptionType),
  )

// To show just subcategories (water, juice, beer) I filter by categoryValue, which comes from onChange on categories select
const subcategoriesOptions = categories
  .filter((category) => category.parent_id === categoryValue)
  .map(
    ({ id, name }) =>
      ({
        value: id,
        description: name,
      } as CustomSelectOptionType),
  )


  // The JSX
 return (
   <>
      <CustomSelect
        name="category"
        label="Categoria"
        data={categoriesOptions}
        onChange={(e) => setCategoryValue(e.target.value)}
      />
      <CustomSelect
        name="subcategory"
        label="Sub-categoria"
        data={subcategories}
      />
  </>
)

My problem occurs when I go forward and return to step one. On the form context, subcategory field has a value, but it is not set correctly to the field. I mean, the value is correct, but the label shows (Select one option)

If you wanna see my complete code, check the gist below
https://gist.github.com/ivanvinicius/913c568d25b8732d0c5bec400bb1165f

[leapful]

@ivanvinicius

Please provide a minimal codesandbox to re-produce this issue.