fix: respect as prop before render for components and HTML tags

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={{}} />);
 

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 };

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>
 `;