fix: bug where _inPicture would be set on <img>'s that were children …

…of <Picture>

src/HOFs/propMerger.js

@@ -73,10 +73,10 @@ export const mergeProps = (src, destination) => {
  * @param {React.Element <typeof Component} Component -  with defined `props`.
  * @returns Component with merged `props`.
  */
-export const mergeComponentPropsHOF = (Component) => (props) => {
+export const mergeComponentPropsHOF = (Component) => function mergeComponentPropsHOFInner(props) {
   const contextProps = useImgixContext();
   if (contextProps == null) {
-    return <Component {...props} />
+    return <Component {...props} />;
   }
 
   const childProps = mergeProps(contextProps, props);

src/react-imgix.jsx

@@ -289,10 +289,18 @@ class PictureImpl extends Component {
     // make sure all of our children have key set, otherwise we get react warnings
     let _children =
       React.Children.map(children, (child, idx) =>
-        React.cloneElement(child, {
+        {
+        const childIsReactImgix = child.type?.name === 'mergeComponentPropsHOFInner';
+        return React.cloneElement(child, Object.assign({
           key: buildKey(idx),
-          _inPicture: true,
-        })
+        },
+          // This prevents props._inPicture being set on other children if
+          // they're passed, such as an <img> component, which will cause a
+          // React error
+          childIsReactImgix && {
+            _inPicture: true,
+          }));
+        }
       ) || [];
 
     /*

test/unit/react-imgix.test.jsx

@@ -560,6 +560,16 @@ describe("When in picture mode", () => {
     const onMountArg = onMountedSpy.lastCall.args[0];
     expect(onMountArg).toBeInstanceOf(HTMLPictureElement);
   });
+
+  it('should not pass _inPicture to a <img> element', () => {
+    const sut = mount(
+      <Picture >
+        <img />
+      </Picture>
+    );
+
+    expect(sut.find('img').props()._inPicture).toBe(undefined)
+  })
 });
 
 describe("When in background mode", () => {