From 176f45b1e645715530d7659ac56db447ab347f90 Mon Sep 17 00:00:00 2001
From: rishikant sahoo <210853476+rishilifts@users.noreply.github.com>
Date: Wed, 14 Oct 2026 03:22:41 +0530
Subject: [PATCH 1/3] fix: respect as prop before render

---
 src/ErrorMessage.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/ErrorMessage.tsx b/src/ErrorMessage.tsx
index 0196985..80b4e6e 100644
--- a/src/ErrorMessage.tsx
+++ b/src/ErrorMessage.tsx
@@ -31,12 +31,17 @@ const ErrorMessage = <
 
   return React.isValidElement(as)
     ? React.cloneElement(as, props)
+    : as
+    ? React.createElement(
+        as as React.ComponentType<any> | keyof JSX.IntrinsicElements,
+        props,
+      )
     : render
     ? (render({
         message: messageFromRegister || message,
         messages: types,
       }) as React.ReactElement)
-    : React.createElement((as as string) || React.Fragment, props);
+    : React.createElement(React.Fragment, props);
 };
 
 export { ErrorMessage };

From 736187ee678c87c3528ccb011909d111e9293acf Mon Sep 17 00:00:00 2001
From: rishikant sahoo <210853476+rishilifts@users.noreply.github.com>
Date: Wed, 14 Oct 2026 03:22:59 +0530
Subject: [PATCH 2/3] test: ensure as skips render callbacks

---
 src/ErrorMessage.test.tsx | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/ErrorMessage.test.tsx b/src/ErrorMessage.test.tsx
index 4c8636b..738ff6f 100644
--- a/src/ErrorMessage.test.tsx
+++ b/src/ErrorMessage.test.tsx
@@ -3,6 +3,26 @@ import { render } from '@testing-library/react';
 import { ErrorMessage } from './ErrorMessage';
 
 describe('ErrorMessage', () => {
+  it.each([
+    'span' as const,
+    ({ children }: { children: React.ReactNode }) => (
+      <strong>{children}</strong>
+    ),
+  ])('uses as before render for %s', (as) => {
+    const renderMessage = jest.fn(() => <em>wrong renderer</em>);
+    const { container } = render(
+      <ErrorMessage
+        as={as}
+        errors={{ test: { type: 'required', message: 'Required' } }}
+        name="test"
+        render={renderMessage}
+      />,
+    );
+    expect(container.textContent).toBe('Required');
+    expect(container.querySelector('span, strong')).not.toBeNull();
+    expect(renderMessage).not.toHaveBeenCalled();
+  });
+
   it('should render correctly', () => {
     const { asFragment } = render(<ErrorMessage name="test" errors={{}} />);
 

From 6c2830ac23cb1e416d609eb9c93511c51600f16b Mon Sep 17 00:00:00 2001
From: rishikant sahoo <210853476+rishilifts@users.noreply.github.com>
Date: Wed, 14 Oct 2026 03:23:13 +0530
Subject: [PATCH 3/3] test: update component precedence snapshot

---
 src/__snapshots__/ErrorMessage.test.tsx.snap | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/__snapshots__/ErrorMessage.test.tsx.snap b/src/__snapshots__/ErrorMessage.test.tsx.snap
index f9fc891..82df838 100644
--- a/src/__snapshots__/ErrorMessage.test.tsx.snap
+++ b/src/__snapshots__/ErrorMessage.test.tsx.snap
@@ -18,7 +18,9 @@ exports[`ErrorMessage should render correctly with flat errors and as with compo
 
 exports[`ErrorMessage should render correctly with flat errors and as with component and render 1`] = `
 <DocumentFragment>
-  flat
+  <div>
+    flat
+  </div>
 </DocumentFragment>
 `;