React Native showSoftInputOnFocus not working properly

Question

I've two input fields in my application.

<ScrollView>
  <View>
    <TextInput
      placeholder="Enter amount:"
      value={firstInput}
      showSoftInputOnFocus={false}
      onFocus={()=>setShowCalculator(true)}
      onBlur={()=>setShowCalculator(false)}
    />
    <TextInput
      placeholder="Enter description:"
      value={secondInput}
    />
  </View>
</ScrollView>

When we click the first input is clicked, the keyboard is not shown instead calculator is shown. And when we click the second input, it opens the default keyboard. It works completely fine when I click one input, unfocus it by clicking outside the input and then click another input. But the issue arises when I click the second input and without unfocusing it, I click on the first input.

Issue:

When the second TextInput is focused, the keyboard is displayed. Then when I press the first input (when the second input is focused and the keyboard is open), it focuses the first input but the keyboard is not dismissed.

To solve this, i added onBlur={()=>Keyboard.dismiss()} to the second input. After adding this prop, when I switch the cursor from the second TextInput to the first, the keyboard is hidden this time, but the first TextInput is not focused. I must press the first TextInput again to make it focused.

Question:

How to make the first TextInput get focus immediately when I press it and show the calculator, not the keyboard?

Example https://snack.expo.dev/@ersumanbhattarai/93b02d?platform=android