Form submit functionality not working

[safinghoghabori]

I have a form with different form elements like input, dropdowns, radio buttons, etc., and I want to submit it when the user presses the enter key. However, let's say after the user types something in the input field and presses the enter key on the keyboard to submit the form, it defocuses the input field; on the second click, it hits the submit button. I'm not sure why it's submitting the form on the second enter click. The same occurs if the user is on any other form elements.

Actual Result:
Not submitting form when user presses enter key (or submitting on 2nd time enter key pressed)

Expected Result:
Should submit form when user pressed enter key

Here is the code:
Form Component: https://gist.github.com/safinghoghabori/d24e08c9ce184f3180ae342dcf073546

PS: This is how I'm detecting the Enter key, but still it is not working because focus remains on the last form element the user has clicked:

 useEffect(() => {
    if (Platform.OS === "web") {
      const handleKeyDown = (e: KeyboardEvent) => {
        if (e.key === "Enter" && !isSuccessModalVisible) {
          handleSave();
        }
      };

      window.addEventListener("keydown", handleKeyDown);
      return () => window.removeEventListener("keydown", handleKeyDown);
    }
  }, [handleSave, isSuccessModalVisible]);