🐛 [#266] add prefix to the field key for AddressNL before accessing the formik context

When a user clicks on the "edit" button in the editgrid, react rerenders component as an
isolated EditGridItem and creates an isolated formik context, where the field names have a prefix
like "editgrid:0".
Therefore we need to prefix the field name with 'useFieldConfig' hook in order to find the data in the
new isolated context.

Author: annashamray

src/registry/addressNL/deriveAddress.ts

@@ -3,7 +3,7 @@ import {useFormikContext} from 'formik';
 import {useEffect, useState} from 'react';
 import {useAsync} from 'react-use';
 
-import {useDebounce, useFormSettings} from '@/hooks';
+import {useDebounce, useFieldConfig, useFormSettings} from '@/hooks';
 
 import type {FormValues} from './types';
 import {DEFAULT_POSTCODE_REGEX, HOUSE_NUMBER_REGEX} from './validationSchema';
@@ -20,6 +20,7 @@ const testValidInputs = (postcode: string, houseNumber: string): boolean => {
 
 export const useDeriveAddress = (key: string, enabled: boolean): UseDeriveAddress => {
   const {getFieldProps, setFieldValue} = useFormikContext<FormValues>();
+  key = useFieldConfig(key);
   const {value} = getFieldProps<AddressData>(key);
   const formSettings = useFormSettings();
   const [enableManualEntry, setEnableManualEntry] = useState<boolean>(false);