error for valid react element

Author: Agney

example/src/IconList.tsx

@@ -35,8 +35,8 @@ const spinners = [
 const IconList = () => {
   return (
     <ul>
-      {spinners.map(({ indicator: Indicator, width }) => (
-        <SpinnerSection indicator={<Indicator width={width} />} />
+      {spinners.map(({ indicator: Indicator, width }, index) => (
+        <SpinnerSection indicator={<Indicator width={width} key={index} />} />
       ))}
     </ul>
   );

package-lock.json

@@ -73,5 +73,8 @@
   },
   "lint-staged": {
     "*.{js,css,md}": "prettier --write"
+  },
+  "dependencies": {
+    "tiny-invariant": "^1.1.0"
   }
 }

package.json

@@ -1,4 +1,5 @@
-import { cloneElement, ReactElement } from 'react';
+import { cloneElement, ReactElement, isValidElement } from 'react';
+import invariant from 'tiny-invariant';
 
 import { useLoaderContext } from './LoaderContext';
 
@@ -17,12 +18,16 @@ type AriaLive = 'off' | 'assertive' | 'polite' | undefined;
  * Hook returning Indicator element according to loading argument.
  * @example const { containerProps, indicatorEl } = useLoading({ loading: true })
  */
-export function useLoading({ loading = false, indicator, loaderProps }: Props) {
+export function useLoading({ loading = false, indicator, loaderProps = {} }: Props) {
   const containerProps = {
     'aria-busy': loading,
     'aria-live': 'polite' as AriaLive,
   };
 
+  const loaderContext = useLoaderContext();
+  const indicatorEl = indicator ?? loaderContext?.indicator;
+  invariant(isValidElement(indicatorEl), 'Expected a valid React element as indicator');
+
   const accessibleLoaderProps = (() => {
     const { valueText, ...rest } = loaderProps;
     return {
@@ -31,9 +36,6 @@ export function useLoading({ loading = false, indicator, loaderProps }: Props) {
       ...rest,
     }
   })();
-
-  const loaderContext = useLoaderContext();
-  const indicatorEl = indicator ?? loaderContext?.indicator;
   const accessibleIndicator = indicatorEl ? cloneElement(indicatorEl, accessibleLoaderProps) : null;
 
   return {