FEATURE: Add optional Id prop on ErrorMessageProps type (#3825)

- Additional optional `id` prop added to `ErrorMessageProps` to make it easily testable in e2e tests. 
- Updated the docs of the section ErrorMessage and added an example to demonstrate this update.
- Since it doesn't change the functionality, it didn't need to be covered under any test case.

**NOTE:** This change won't affect any functionalities and since it is an optional param, it can be omitted if not needed.

**This is my first contribution to this project, please let me know if I missed something..**

Author: zoosphar

docs/api/errormessage.md

@@ -97,6 +97,17 @@ Either a React component or the name of an HTML element to render. If not specif
 // --> {touched.email && error.email ? error.email : null}
 ```
 
+### `id`
+
+`id?: string`
+
+A field's id in Formik state. To get access to DOM elements for e2e testing purposes, tt doesn't impact the implementation in any way as the prop can still be omitted. 
+```jsx
+// id will be used only for testing purposes
+// not contributing anything to the core implementation.
+<ErrorMessage name="email" id="form_email_id" />
+```
+
 ### `name`
 
 `name: string`

packages/formik/src/ErrorMessage.tsx

@@ -4,6 +4,7 @@ import { getIn, isFunction } from './utils';
 import { connect } from './connect';
 
 export interface ErrorMessageProps {
+  id?: string;
   name: string;
   className?: string;
   component?: string | React.ComponentType;

packages/formik/test/Field.test.tsx

@@ -426,23 +426,31 @@ describe('Field / FastField', () => {
       }
     );
 
-    cases('constructs error for a nested field when validateField is called', async (renderField) => {
-      const validationSchema = Yup.object({
-        user: Yup.object().shape({
-          name: Yup.string().required('required')
-        })
-      });
+    cases(
+      'constructs error for a nested field when validateField is called',
+      async renderField => {
+        const validationSchema = Yup.object({
+          user: Yup.object().shape({
+            name: Yup.string().required('required'),
+          }),
+        });
 
-      const { getFormProps, rerender } = renderField({}, { validationSchema });
+        const { getFormProps, rerender } = renderField(
+          {},
+          { validationSchema }
+        );
 
-      rerender();
+        rerender();
 
-      act(() => {
-        getFormProps().validateField('user.name');
-      })
+        act(() => {
+          getFormProps().validateField('user.name');
+        });
 
-      await waitFor(() => expect(getFormProps().errors).toEqual({ user: { name: 'required' }}));
-    })
+        await waitFor(() =>
+          expect(getFormProps().errors).toEqual({ user: { name: 'required' } })
+        );
+      }
+    );
   });
 
   describe('warnings', () => {

website/src/components/clients/Client.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Image from "next/image";
+import Image from 'next/image';
 
 interface ClientProps {
   name: string;
@@ -19,9 +19,10 @@ export const Client = React.memo<ClientProps>(
         loading="lazy"
         className="inline"
         style={{
-          maxWidth: "100%",
-          height: "auto"
-        }} />
+          maxWidth: '100%',
+          height: 'auto',
+        }}
+      />
     </span>
   )
 );

website/src/components/forwardRefWithAs.tsx

@@ -86,7 +86,7 @@ export function forwardRefWithAs<Props, ComponentType extends As>(
     ref: React.RefObject<any>
   ) => React.ReactElement | null
 ) {
-  return React.forwardRef(comp as any) as unknown as ComponentWithAs<
+  return (React.forwardRef(comp as any) as unknown) as ComponentWithAs<
     ComponentType,
     Props
   >;