Trying to receive by submit different value than the input displays

[jonathatargino]

Hello everyone. Im not have much knowledge about React Hook Form, so probably I'm doing some things wrong.
I have a component called Autocomplete, and it isn't of a third library. Basically, this component is a input who when focused, open a dropdown with options. These options can be filtered by typing in the input.
Here is my problem: I want to make my component able to receive as options an array of objects containing option and value.

Can I display on input the option.option and set the input value with option.value?
Example: Users select "teste1". The string "teste1" will be displayed in input, but, when the user submit, the value 1 will be received.

I have already tried to do this, setting the input value as a state containing option.option and setValue(option.value), but seems dirty. Here is my code:

Note that when users select a option, the state inputInnerText is set as option.option and the setValue is called, passing the option.value

Note that the state value is used as input value. This value is the same as Autocomplete's inputInnerText

My solution to do this comes with some bugs, like when user select an option and turns to focus input, the value received by submit is not the option.value, but the input text.

Thank everyone and sorry for my bad code.