Modify register step form for guests

• Passport Country now displays two letter code after selection.
• A heading has been added for identity information.
• An error message is now displayed if the user inputs both national id and passport information.

Resolves: GREG-120

frontend/src/hooks/useGuests/index.tsx

 import { useEffect, useState } from 'react'
 import { FetchedGuest, Guest } from 'interfaces'
-import { parseIdentity, parseRole } from 'utils'
+import { parseIdentity, parseRole, fetchJsonOpts } from 'utils'
 
 const useGuests = () => {
   const [guests, setGuests] = useState<Guest[]>([])
 
-  const getGuestsInfo = async () => {
-    try {
-      const response = await fetch('/api/ui/v1/guests/?format=json')
-      const jsonResponse = await response.json()
-      if (response.ok) {
-        const persons = await jsonResponse
+  const getGuestsInfo = () =>
+    fetch('/api/ui/v1/guests/', fetchJsonOpts())
+      .then((response) => (response.ok ? response.json() : []))
+      .then((persons) => {
         setGuests(
           persons.map(
             (person: FetchedGuest): Guest => ({
@@ -28,11 +26,8 @@ const useGuests = () => {
             })
           )
         )
-      }
-    } catch (error) {
-      setGuests([])
-    }
-  }
+      })
+      .catch(() => setGuests([]))
 
   const reloadGuests = () => {
     getGuestsInfo()