I want to create multiple ref's to the same global component. Like for example TextInput , if i want to add ref to it i use. this in my class based component :

```
 <TextInput

                  ref={input => {
                    this.secondTextInput = input;
                  }}

                />

```

and then call via `this.secondTextInput.focus();` to focus the textinput. It works as long im importing the whole textInput directly in my class.

Similiarly if ive created a global component for TextInput in another file like :

```
export const OTPInput = props => {
  return (

      <TextInput
        placeholder={props.title}
        onChangeText={props.onTextEnter}
        value={props.value}

      />

  );
};

```

and using this in my classes by importing like :

```
Class ABC extends Component{

render(){
return(
<>
<OTPInput title ="first otp" />
<OTPInput title ="another otp" />
</>
)

}

}

```

How can i create ref and pass it , so that i can focus the text input by clicking some button in my class func .

Any help would be greatful