React - Accessibility to refs

Question

I develop a react app, and i encounter a pb. I would like to do a form. For this i call a component , documentField.

<DocumentField field={field} onChangeCallback={updateValue} index={index} />

In this component i have a switch :

switch (props.field.type) {
  case props.field.singleValue && FieldType.ElementsSelector: {
    return (
      <Picker
        property={props.field}
        single={true}
      ></Picker>
    );
  }
  case FieldType.ElementsSelector: {
    return (
      <Picker property={props.field}></Picker>
    );
  }
  case FieldType.TextInput: {
    return ( 
      <TextField>
    );
  ....

It allows me to check a conf files, and display the right fields in my form.

In the component Picker, i have :

  const testRef = useRef<any>([]);

and on a UseEffect i set the items who be needed to be display in the list :

  testRef?.current.setItems(options2);

and then i use my ref in a component

<MyCOmponent
      size="md"
      ref={testRef}
      maxDisplayedItems={10000}
     ....
    ></MyCOmponent>

Everything is working fine, i can set the items in the different list displayed to the user.

Now i would like to "link" different choiceList/fields.

For example when i update and choose the EU region (in the field region), i would like to sort the country's list, and only display the european countries (in the field country)

My problem is that i cannot succeed to access to the ref on the component of the country field, when i'm on the of the region field.

Hope it's clear...

Thanks for your answers.