From b59abe3df74f63c61ebadf9c8594f6d4ca3d80a6 Mon Sep 17 00:00:00 2001
From: Robert Reinhard <robert.reinhard@bukwild.com>
Date: Mon, 27 Nov 2023 11:04:30 -0800
Subject: [PATCH] Fix keys being spread

Fixes this console warning:

React keys must be passed directly to JSX without using spread
---
 packages/react/src/LazyVideo.tsx    | 2 +-
 packages/react/src/PictureImage.tsx | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/LazyVideo.tsx b/packages/react/src/LazyVideo.tsx
index 10c2eea..7d0a30f 100644
--- a/packages/react/src/LazyVideo.tsx
+++ b/packages/react/src/LazyVideo.tsx
@@ -93,7 +93,7 @@ export default function LazyVideo({
 
       {/* Implement lazy loading by not adding the source until ready */}
       { shouldLoad && sourceVariants.map(({ media, key }) => (
-        <Source {...{ key, videoLoader, src, media }} />
+        <Source key={ key } {...{ videoLoader, src, media }} />
       ))}
     </video>
   )
diff --git a/packages/react/src/PictureImage.tsx b/packages/react/src/PictureImage.tsx
index 68e12a3..f09f4e9 100644
--- a/packages/react/src/PictureImage.tsx
+++ b/packages/react/src/PictureImage.tsx
@@ -63,8 +63,7 @@ export default function PictureImage(
 
       {/* Make <source>s */}
       {imageLoader && sourceVariants.map(({ type, media, key }) => (
-        <Source {...{
-          key,
+        <Source key={ key } {...{
           widths: srcsetWidths,
           imageLoader, sizes, src, type, media
         }} />