Fix initialValue not set

But following warning is now shown in console:

"""
Warning: A component is changing a controlled input to be uncontrolled.
This is likely caused by the value changing from a defined to undefined, which should not happen.
Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://reactjs.org/link/controlled-components
"""

components/form.js

@@ -961,3 +961,17 @@ export function DatePicker ({ fromName, toName, noForm, onChange, when, from, to
     />
   )
 }
+
+export function ClientInput ({ initialValue, ...props }) {
+  // This component can be used for Formik fields
+  // where the initial value is not available on first render.
+  // Example: value is stored in localStorage which is fetched
+  // after first render using an useEffect hook.
+  const [,, helpers] = useField(props)
+
+  useEffect(() => {
+    helpers.setValue(initialValue)
+  }, [initialValue])
+
+  return <Input {...props} />
+}

pages/settings/wallets/lnbits.js

@@ -1,5 +1,5 @@
 import { getGetServerSideProps } from '../../../api/ssrApollo'
-import { Form, Input } from '../../../components/form'
+import { Form, ClientInput } from '../../../components/form'
 import { CenterLayout } from '../../../components/layout'
 import { WalletButtonBar, WalletCard } from '../../../components/wallet-card'
 import { lnbitsSchema } from '../../../lib/validate'
@@ -35,13 +35,15 @@ export default function LNbits () {
           }
         }}
       >
-        <Input
+        <ClientInput
+          initialValue={url}
           label='lnbits url'
           name='url'
           required
           autoFocus
         />
-        <Input
+        <ClientInput
+          initialValue={adminKey}
           type='password'
           autoComplete='false'
           label='admin key'

pages/settings/wallets/nwc.js

@@ -1,5 +1,5 @@
 import { getGetServerSideProps } from '../../../api/ssrApollo'
-import { Form, Input } from '../../../components/form'
+import { Form, ClientInput } from '../../../components/form'
 import { CenterLayout } from '../../../components/layout'
 import { WalletButtonBar, WalletCard } from '../../../components/wallet-card'
 import { nwcSchema } from '../../../lib/validate'
@@ -34,7 +34,8 @@ export default function NWC () {
           }
         }}
       >
-        <Input
+        <ClientInput
+          initialValue={nwcUrl}
           label='connection'
           name='nwcUrl'
           required