diff --git a/README.md b/README.md
index e7ff13c..9a82c9f 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ Simple form library for React Native with great UX for developer and end-user ap
 - Email, username, password, number, numberText, decimal, decimalText,
 - Great typescript support!
 - Nested object with dot notation
-- Nested forms
+- ~~Nested forms~~ (don't work well yet)
 - Great decimal support with support for , notation and automatically convert it to a Number object
 
 See a demo: https://twitter.com/RichardLindhout/status/1344009881863516165
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 94a4ff0..e76b285 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -8,7 +8,7 @@ import {
   Form,
   useFormState,
 } from 'react-native-use-form';
-import { Appbar, Button, Surface, Text, Title } from 'react-native-paper';
+import { Appbar, Button, Text } from 'react-native-paper';
 import TextInputWithError from './TextInputWithError';
 import { useRef } from 'react';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
@@ -30,7 +30,9 @@ type FormType = {
   password: string;
   age: number | undefined;
   money: number | undefined;
+  description: string | undefined;
   postalCode: string | undefined;
+  postalCodeDisabled: string | undefined;
   organization: {
     name: string;
     telephone: string;
@@ -52,9 +54,11 @@ export default function App() {
       email: '',
       telephone: '',
       password: '',
-      age: 0,
-      money: 0,
+      age: undefined,
+      money: undefined,
+      description: '',
       postalCode: '',
+      postalCodeDisabled: '',
       organization: {
         name: '',
         telephone: '',
@@ -135,6 +139,16 @@ export default function App() {
                   label: 'Postalcode',
                 })}
               />
+              <TextInputWithError
+                editable={false}
+                mode="outlined"
+                {...fh.text('postalCode', {
+                  enhance: (v) => {
+                    return (v || '').toUpperCase();
+                  },
+                  label: 'Postalcode (disabled)',
+                })}
+              />
 
               <TextInputWithError
                 mode="outlined"
@@ -189,8 +203,17 @@ export default function App() {
                   label: 'Organization revenue',
                 })}
               />
-              <AddressEdit {...fh.raw('address')} />
-              <AddressCompanyEdit {...fh.raw('address.company')} />
+              <TextInputWithError
+                mode="outlined"
+                {...fh.text('description', {
+                  label: 'Description',
+                  required: true,
+                  minLength: 3,
+                  maxLength: 10,
+                })}
+              />
+              {/*<AddressEdit {...fh.raw('address')} />*/}
+              {/*<AddressCompanyEdit {...fh.raw('address.company')} />*/}
               <Button
                 mode="contained"
                 onPress={submit}
@@ -206,66 +229,66 @@ export default function App() {
   );
 }
 
-function AddressEdit({
-  value,
-  onChange,
-  ...rest
-}: {
-  value: AddressType | null | undefined;
-  onChange: (v: AddressType | null | undefined) => void;
-}) {
-  const [{ formProps }, fh] = useFormState<AddressType>(
-    value || { street: '', houseNumber: '', company: { name: '' } },
-    {
-      onChange,
-    }
-  );
-  return (
-    <Surface {...rest}>
-      <Title>Nested form</Title>
-      <Form {...formProps}>
-        <TextInputWithError
-          mode="outlined"
-          label="Street"
-          {...fh.streetAddress('street', { required: true })}
-        />
-        <TextInputWithError
-          mode="outlined"
-          label="House number"
-          {...fh.streetAddress('houseNumber')}
-        />
-      </Form>
-    </Surface>
-  );
-}
-
-function AddressCompanyEdit({
-  value,
-  onChange,
-  ...rest
-}: {
-  value: AddressCompany | undefined | null;
-  onChange: (v: AddressCompany | undefined | null) => void;
-}) {
-  const [{ formProps }, fh] = useFormState<AddressCompany>(
-    value || { name: '' },
-    {
-      onChange,
-    }
-  );
-  return (
-    <Surface {...rest} style={{ padding: 12 }}>
-      <Title>Nested form</Title>
-      <Form {...formProps}>
-        <TextInputWithError
-          mode="outlined"
-          label="Street"
-          {...fh.text('name')}
-        />
-      </Form>
-    </Surface>
-  );
-}
+// function AddressEdit({
+//   value,
+//   onChange,
+//   ...rest
+// }: {
+//   value: AddressType | null | undefined;
+//   onChange: (v: AddressType | null | undefined) => void;
+// }) {
+//   const [{ formProps }, fh] = useFormState<AddressType>(
+//     value || { street: '', houseNumber: '', company: { name: '' } },
+//     {
+//       onChange,
+//     }
+//   );
+//   return (
+//     <Surface {...rest}>
+//       <Title>Nested form</Title>
+//       <Form {...formProps}>
+//         <TextInputWithError
+//           mode="outlined"
+//           label="Street"
+//           {...fh.streetAddress('street', { required: true })}
+//         />
+//         <TextInputWithError
+//           mode="outlined"
+//           label="House number"
+//           {...fh.streetAddress('houseNumber')}
+//         />
+//       </Form>
+//     </Surface>
+//   );
+// }
+//
+// function AddressCompanyEdit({
+//   value,
+//   onChange,
+//   ...rest
+// }: {
+//   value: AddressCompany | undefined | null;
+//   onChange: (v: AddressCompany | undefined | null) => void;
+// }) {
+//   const [{ formProps }, fh] = useFormState<AddressCompany>(
+//     value || { name: '' },
+//     {
+//       onChange,
+//     }
+//   );
+//   return (
+//     <Surface {...rest} style={{ padding: 12 }}>
+//       <Title>Nested form</Title>
+//       <Form {...formProps}>
+//         <TextInputWithError
+//           mode="outlined"
+//           label="Street"
+//           {...fh.text('name')}
+//         />
+//       </Form>
+//     </Surface>
+//   );
+// }
 
 const telephoneRegex = {
   regex: new RegExp(/^\d+$/),
diff --git a/src/Form.tsx b/src/Form.tsx
index 837c7ac..8d79d6e 100644
--- a/src/Form.tsx
+++ b/src/Form.tsx
@@ -1,24 +1,7 @@
 import * as React from 'react';
 import { FormContext } from './FormContext';
-import type { IndexerType, ReferencerType } from './types';
 
-export default function Form({
-  children,
-  referencer,
-  indexer,
-}: {
-  children: any;
-  indexer: IndexerType;
-  referencer: ReferencerType;
-}) {
-  return (
-    <FormContext.Provider
-      value={{
-        indexer,
-        referencer,
-      }}
-    >
-      {children}
-    </FormContext.Provider>
-  );
+const empty = {};
+export default function Form({ children }: { children: any }) {
+  return <FormContext.Provider value={empty}>{children}</FormContext.Provider>;
 }
diff --git a/src/FormContext.tsx b/src/FormContext.tsx
index 57807cc..e8409cb 100644
--- a/src/FormContext.tsx
+++ b/src/FormContext.tsx
@@ -1,14 +1,6 @@
 import * as React from 'react';
-import type { IndexerType, ReferencerType } from './types';
-// import { MutableRefObject } from 'react';
 
-export type FormContextType = {
-  indexer: IndexerType;
-  referencer: ReferencerType;
+export type FormContextType = {};
+const empty = {};
 
-  // refForKey: MutableRefObject<FormRefKeyMap>;
-};
-
-export const FormContext = React.createContext<FormContextType | undefined>(
-  undefined
-);
+export const FormContext = React.createContext<FormContextType>(empty);
diff --git a/src/hasVirtualKeyboard.native.ts b/src/hasVirtualKeyboard.native.ts
new file mode 100644
index 0000000..badccef
--- /dev/null
+++ b/src/hasVirtualKeyboard.native.ts
@@ -0,0 +1,2 @@
+const hasVirtualKeyboard = true;
+export default hasVirtualKeyboard;
diff --git a/src/hasVirtualKeyboard.ts b/src/hasVirtualKeyboard.ts
new file mode 100644
index 0000000..92f5fb3
--- /dev/null
+++ b/src/hasVirtualKeyboard.ts
@@ -0,0 +1,22 @@
+const hasTouch = 'ontouchstart' in window;
+
+// const screenIsPortrait = window.matchMedia('(orientation: portrait)').matches;
+// return screenIsPortrait ? 'portrait' : 'landscape';
+// let heightPerOrientation: Record<string, number> = {
+//   [getOrientation()]: window.innerHeight,
+// };
+// window.addEventListener('resize', () => {
+//   const initialHeight = heightPerOrientation[getOrientation()];
+//   if (initialHeight) {
+//     if (window.innerHeight < initialHeight) {
+//       console.log('Virtual keyboard likely opened');
+//     } else {
+//       console.log('Virtual keyboard likely closed');
+//       initialHeight = window.innerHeight;
+//     }
+//   }
+// });
+
+const screenIsLarge = window.matchMedia('(min-width: 1000px)').matches;
+const hasVirtualKeyboard = hasTouch && !screenIsLarge;
+export default hasVirtualKeyboard;
diff --git a/src/types.ts b/src/types.ts
index 7c2c94b..008be61 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -7,7 +7,7 @@ import type {
   TextInputFocusEventData,
   TextInputProps,
 } from 'react-native';
-import type { TextInput } from 'react-native';
+
 import type { ScrollView, View } from 'react-native';
 
 type GetIndexedField<T, K> = K extends keyof NonNullable<T>
@@ -133,10 +133,7 @@ export type FormStateType<T> = {
   // ) => void;
   // clearErrors: () => void;
   submit: () => void;
-  formProps: {
-    indexer: IndexerType;
-    referencer: ReferencerType;
-  };
+  formProps: {};
   setValues: React.Dispatch<SetStateAction<T>>;
   hasError: <K extends DotNestedKeys<T>>(key: K) => boolean;
 };
@@ -245,14 +242,3 @@ type FormTextType<T> = <K extends DotNestedKeys<T>>(
 export type FieldsLastCharacters<T> = {
   [key in keyof T]?: string | undefined;
 };
-
-type ReferencerReturns = TextInputProps & { ref: React.Ref<TextInput> };
-export type ReferencerType = (
-  key: string,
-  formIndex: number
-) => ReferencerReturns;
-
-export type IndexerType = {
-  add: () => number;
-  i: number;
-};
diff --git a/src/useFormContext.ts b/src/useFormContext.ts
deleted file mode 100644
index 17b2b2b..0000000
--- a/src/useFormContext.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { FormContext, FormContextType } from './FormContext';
-import * as React from 'react';
-import useInnerContext from './useInnerContext';
-
-export function useFormContext(): FormContextType & {
-  formIndex: number;
-} {
-  const px = React.useContext(FormContext);
-  const ix = useInnerContext(!!px);
-  const ctx = (px || ix)!;
-  const idx = React.useRef<number>(px ? px.indexer.add() : ctx.indexer.i);
-  return {
-    ...ctx,
-    formIndex: idx.current,
-  };
-}
diff --git a/src/useFormState.ts b/src/useFormState.ts
index 890797a..c3fa924 100644
--- a/src/useFormState.ts
+++ b/src/useFormState.ts
@@ -1,7 +1,7 @@
 import { useReferencedCallback } from './utils';
 import type { FormStateType, FormOptions } from './types';
 import { defaultLocale } from './translations/utils';
-import { useFormContext } from './useFormContext';
+
 import { useInputs } from './useInputs';
 import { useSubmit } from './useSubmit';
 import useLayout from './useLayout';
@@ -11,6 +11,7 @@ import useValues from './useValues';
 import useFocusedOnce from './useFocusedOnce';
 import useWasSubmitted from './useWasSubmitted';
 import { FormInputsType } from './types';
+import useNextAndSubmitRef from './useNextAndSubmitRef';
 
 export default function useFormState<T>(
   initialState: T,
@@ -22,7 +23,6 @@ export default function useFormState<T>(
   const focusedOnce = useFocusedOnce<T>();
   const wasSubmitted = useWasSubmitted();
   const referencedCallback = useReferencedCallback();
-  const ctx = useFormContext();
 
   const layout = useLayout<T>({
     referencedCallback,
@@ -36,25 +36,28 @@ export default function useFormState<T>(
     focusedOnce,
     wasSubmitted,
   });
-  const input = useInputs<T>({
+  const submit = useSubmit<T>({
     options,
-    locale,
-    context: ctx,
-    error,
     layout,
-    value,
+    error,
     touch,
+    wasSubmitted,
+    value,
     focusedOnce,
-    referencedCallback,
   });
-  const submit = useSubmit<T>({
+
+  const nextAndSubmit = useNextAndSubmitRef<T>({ submit });
+
+  const input = useInputs<T>({
     options,
-    layout,
+    locale,
     error,
-    touch,
-    wasSubmitted,
+    layout,
     value,
+    touch,
     focusedOnce,
+    referencedCallback,
+    nextAndSubmit,
   });
 
   const formState: FormStateType<T> = {
@@ -75,10 +78,7 @@ export default function useFormState<T>(
 
     submit: submit.submit,
 
-    formProps: {
-      referencer: ctx.referencer,
-      indexer: ctx.indexer,
-    },
+    formProps: {},
   };
 
   return [
diff --git a/src/useInnerContext.ts b/src/useInnerContext.ts
deleted file mode 100644
index dbda32b..0000000
--- a/src/useInnerContext.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import useRefState from './useRefState';
-import * as React from 'react';
-import { useReferencedCallback } from './utils';
-import type { TextInput } from 'react-native';
-import type { IndexerType, ReferencerType } from './types';
-
-type RefKeyMap = Record<string, TextInput>;
-export type FormRefKeyMap = Record<number, RefKeyMap>;
-type IndexKeyMap = Record<string, number>;
-type FormIndexKeyMap = Record<number, IndexKeyMap>;
-
-// we need something to keep track of nested forms
-export function indexer(): IndexerType {
-  let i: number = 0;
-  function add() {
-    i++;
-    return i;
-  }
-  return {
-    add,
-    i,
-  };
-}
-
-export default function useInnerContext(skip?: boolean) {
-  const [lastKey, setLastKey] = useRefState<string | undefined>(undefined);
-  const refIndex = React.useRef<number>(0);
-
-  const indexForKey = React.useRef<FormIndexKeyMap>({});
-  const refForKey = React.useRef<FormRefKeyMap>({});
-  const referencedCallback = useReferencedCallback();
-
-  React.useEffect(() => {
-    // we would rather not do this hook at all, but we need to keep amount of hooks the same :)
-    if (skip) {
-      return;
-    }
-    const elements = Object.keys(refForKey.current).filter(
-      (key, _) => refForKey.current[key as any] !== null
-    );
-    const lKey = elements[elements.length - 1];
-    setLastKey(lKey);
-  }, [skip, lastKey, setLastKey, refForKey]);
-
-  // we would rather not do this hook at all, but we need to keep amount of hooks the same :)
-  if (skip) {
-    return undefined;
-  }
-
-  const referencer: ReferencerType = (key, formIndex) => {
-    return {
-      ref: referencedCallback(`ref.${key}`, (e: TextInput) => {
-        if (e === null) {
-          return;
-        }
-
-        const rk = refForKey.current;
-        const ik = indexForKey.current;
-        // set default state if undefined
-        rk[formIndex] = rk[formIndex] || {};
-        ik[formIndex] = ik[formIndex] || {};
-
-        const index = rk[formIndex]![key];
-        if (index === undefined) {
-          refIndex.current = refIndex.current + 1;
-          (ik as any)[formIndex][key] = refIndex.current;
-        }
-        (rk as any)[formIndex][key] = e;
-      }),
-      onSubmitEditing:
-        lastKey.current === key
-          ? undefined
-          : // TODO: handle submit on last onSubmitEditing
-            // referencedCallback(`submitEditing.${key}`, () => {
-            //   submit();
-            // })
-            // TODO: blurOrSubmit on last field?
-            referencedCallback(`focusNext.${key}`, () => {
-              const rk = refForKey.current[formIndex] || {};
-              const ik = indexForKey.current[formIndex] || {};
-              const currentField = rk[key];
-
-              // combine fields of current and next form
-              const fields = Object.keys(refForKey.current)
-                .map((frmKey) => {
-                  const fi = Number(frmKey);
-                  const refs = refForKey.current[fi] || {};
-                  const ixs = indexForKey.current[fi];
-                  return Object.keys(refs)
-                    .filter((e) => !!e)
-                    .map((k) => ({
-                      element: refs[k],
-                      index: ixs?.[k],
-                      fi,
-                    }))
-                    .sort(
-                      (a, b) => a.fi - b.fi && (a.index || 0) - (b.index || 0)
-                    );
-                })
-                .flat();
-
-              const nextField = fields.find((f) => {
-                const p = f?.element?.props;
-                // TODO: fix this with function components
-                // skip disabled fields in focus
-                if ((p as any)?.disabled === true || p?.editable === false) {
-                  return false;
-                }
-                // already sorted so the first one to hit above current index is the next field
-                return (f.index || 0) > (ik?.[key] || 0);
-              });
-
-              nextField?.element?.focus?.();
-              currentField?.blur?.();
-            }),
-      blurOnSubmit: lastKey.current === key,
-      returnKeyType: lastKey.current === key ? undefined : 'next',
-    };
-  };
-
-  return { referencer, indexer: indexer(), refForKey };
-}
diff --git a/src/useInputs.ts b/src/useInputs.ts
index 3452a5c..2432b7c 100644
--- a/src/useInputs.ts
+++ b/src/useInputs.ts
@@ -23,17 +23,17 @@ import {
 import * as React from 'react';
 import type { UseErrorsReturnType } from './useErrors';
 import type { UseLayoutReturnType } from './useLayout';
-import type { FormContextType } from './FormContext';
 import type { UseValuesReturnType } from './useValues';
 import type { UseTouchedReturnType } from './useTouched';
 import type { UseFocusedOnceReturnType } from './useFocusedOnce';
+import { UseNextAndSubmitRefReturnType } from './useNextAndSubmitRef';
 
 export type UseInputsReturnType<T> = ReturnType<typeof useInputs<T>>;
 
 export function useInputs<T>({
   options,
   locale,
-  context,
+
   referencedCallback,
   error: {
     errors,
@@ -45,18 +45,17 @@ export function useInputs<T>({
   value: { values, setValues },
   touch: { touched, setTouched },
   focusedOnce: { focusedOnce, setFocusedOnce },
+  nextAndSubmit: { inputReferencer },
 }: {
   options: FormOptions<T> | undefined;
   locale: string;
-  context: FormContextType & {
-    formIndex: number;
-  };
   referencedCallback: ReferencedCallback;
   error: UseErrorsReturnType<T>;
   layout: UseLayoutReturnType<T>;
   value: UseValuesReturnType<T>;
   touch: UseTouchedReturnType<T>;
   focusedOnce: UseFocusedOnceReturnType<T>;
+  nextAndSubmit: UseNextAndSubmitRefReturnType;
 }) {
   const onChange = useLatest(options?.onChange);
   const enhance = useLatest(options?.enhance);
@@ -136,7 +135,7 @@ export function useInputs<T>({
   };
 
   const text: InputT<FormTextInputProps> = (k, h) => ({
-    ...context.referencer(k, context.formIndex),
+    ...inputReferencer(k),
     ...baseProps(k, h),
     value: deepGet(values.current, k) || '',
     onChangeText: referencedCallback(
@@ -147,7 +146,7 @@ export function useInputs<T>({
 
   const numberRawCreator = useNumberRaw<T>({ locale, referencedCallback });
   const numberRaw: InputT<FormTextInputProps> = (k, h) => ({
-    ...context.referencer(k, context.formIndex),
+    ...inputReferencer(k),
     ...baseProps(k, h),
     ...numberRawCreator(k, h, values.current, changeValue),
   });
diff --git a/src/useNextAndSubmitRef.ts b/src/useNextAndSubmitRef.ts
new file mode 100644
index 0000000..43fbc26
--- /dev/null
+++ b/src/useNextAndSubmitRef.ts
@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { useReferencedCallback } from './utils';
+import type { TextInput } from 'react-native';
+import hasVirtualKeyboard from './hasVirtualKeyboard';
+import useRefState from './useRefState';
+import { UseSubmitReturnType } from './useSubmit';
+
+export type UseNextAndSubmitRefReturnType = ReturnType<
+  typeof useNextAndSubmitRef
+>;
+
+export default function useNextAndSubmitRef<T>({
+  submit,
+}: {
+  submit: UseSubmitReturnType<T>;
+}) {
+  const index = React.useRef<number>(0);
+  const [lastKey, setLastKey] = useRefState<string | undefined>(undefined);
+  const inputPerKey = React.useRef<Record<string, TextInput | null>>({});
+  const indexForKey = React.useRef<Record<string, number>>({});
+  const keyForIndex = React.useRef<Record<number, string>>({});
+  index.current = 0;
+  indexForKey.current = {};
+  keyForIndex.current = {};
+
+  const referencedCallback = useReferencedCallback();
+
+  React.useEffect(() => {
+    const allIndexes = Object.keys(indexForKey.current).map((k) =>
+      Number(indexForKey.current[k])
+    );
+    const maxIndex = Math.max(...allIndexes);
+    setLastKey(keyForIndex.current[maxIndex]);
+  }, [setLastKey, inputPerKey]);
+
+  const inputReferencer = (key: string) => {
+    indexForKey.current[key] = index.current;
+    keyForIndex.current[index.current] = key;
+    index.current = index.current + 1;
+
+    return {
+      ref: referencedCallback(`ref.${key}`, (e: TextInput) => {
+        inputPerKey.current[key] = e;
+      }),
+      onSubmitEditing: referencedCallback(`onSubmitEditing.${key}`, () => {
+        // check if is the last key or !virtualKeyboard
+        const allIndexes = Object.keys(indexForKey.current).map((k) =>
+          Number(indexForKey.current[k])
+        );
+        const inputPerIndex: Record<number, TextInput> = Object.keys(
+          inputPerKey.current
+        ).reduce(
+          (acc, k) => ({
+            ...acc,
+            [indexForKey.current[k]!]: inputPerKey.current[k],
+          }),
+          {}
+        );
+        const sortedIndexes = allIndexes.sort((a, b) => a - b);
+        const maxIndex = sortedIndexes[sortedIndexes.length - 1];
+        const currentIndex = indexForKey.current[key] || 0;
+        const currentInput = inputPerIndex[currentIndex];
+        const lastInput = maxIndex && inputPerIndex?.[maxIndex];
+        const isLastInput = lastInput === currentInput;
+        const hasPhysicalKeyboard = !hasVirtualKeyboard;
+        const shouldSubmit = isLastInput || hasPhysicalKeyboard;
+
+        if (shouldSubmit) {
+          submit.submit();
+          return;
+        }
+
+        const nextInputs = sortedIndexes
+          .filter((i) => i > currentIndex)
+          .map((higherIndex) => inputPerIndex[higherIndex])
+          .filter(Boolean);
+
+        const nextField = nextInputs.find((input) => {
+          const p = input?.props;
+
+          if ((p as any)?.disabled === true || p?.editable === false) {
+            return false;
+          }
+          // already sorted so the first one to hit above current index is the next field
+          return input;
+        });
+
+        nextField?.focus?.();
+        currentInput?.blur?.();
+      }),
+      blurOnSubmit: lastKey.current === key,
+      returnKeyType: lastKey.current === key ? 'send' : 'next',
+    };
+  };
+
+  return { inputReferencer };
+}
diff --git a/src/useSubmit.ts b/src/useSubmit.ts
index e7cd6c7..01dc1e8 100644
--- a/src/useSubmit.ts
+++ b/src/useSubmit.ts
@@ -8,6 +8,7 @@ import type { UseValuesReturnType } from './useValues';
 import type { UseTouchedReturnType } from './useTouched';
 import type { UseFocusedOnceReturnType } from './useFocusedOnce';
 import { deepGet } from './objectPath';
+import { Keyboard } from 'react-native';
 
 export type UseSubmitReturnType<T> = ReturnType<typeof useSubmit<T>>;
 
@@ -36,6 +37,7 @@ export function useSubmit<T>({
   return {
     wasSubmitted,
     submit: React.useCallback(() => {
+      Keyboard.dismiss();
       wasSubmitted.setWasSubmitted(true);
       // if it returns an object there are errors
       if (hasErrors) {
diff --git a/tsconfig.json b/tsconfig.json
index 7205a00..cc5cb80 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -9,7 +9,10 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
-    "lib": ["esnext"],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
     "module": "esnext",
     "moduleResolution": "node",
     "noFallthroughCasesInSwitch": true,