Embedding a video with Gatsby <iframe>

I've read the docs about this but my attempt has proven incorrect. I am trying to display a embedded video based on the artist page being viewed. In my Json file I have a featuredVideo key which contains the embedded video url. But when I use featuredVideo in my artist component, nothing displays on the screen. Any help would be greatly appreciated! Here is my video component:

import React from 'react'
const Video = ({ featuredVideo, videoTitle, ...props }) => (
  <div className='video'>
    <iframe
      src={featuredVideo}
      title={videoTitle}
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      frameBorder='0'
      webkitallowfullscreen='true'
      mozallowfullscreen='true'
      allowFullScreen
    />
  </div>
)
export default Video

Here is my artist component:

import Video from './components/video'
const ArtistContainer = ({ data }) => {
  const classes = useStyles()
  const {
    firstName,
    lastName,
    city,
    currentTeam,
    bio,
    twitter,
    instagram,
    email,
    whatWeLove,
    featuredVideo,
    recentPerformance,
  } = data.artistsJson

  return (
...
 <Video src={`https://www.youtube.com/embed/${featuredVideo}`} />

Here is some of the Json file:

    "artistId": 59,
    "firstName": ["FirstName"],
    "lastName": ["LastName"],
    "bio": "This is a tester statement for dev purposes. -- blah blah blah blah blah blah blah -- blah blah blah blah blah blah blah",
    "highlight": "",
    "events": ["Winter 2020"],
    "featuredVideo": "C0eBTtXYTp0",
    "currentTeam": "CurrentTeam",
    "instagram": "https://www.instagram.com/wolfofvillage/",
    "city": "City",
    "tiktok": "",
    "twitter": "https://www.twitter.com/test",
    "youtube": "",
    "email": "test@email.com",
    "address": "",
    "phoneNumber": "",
    "whatWeLove": "This is a tester statement for dev purposes -- blah blah blah blah blah blah blah.",
    "recentPerformance": "06/08/2020"
  }

You are passing a src prop with the dynamic URL in:

 <Video src={`https://www.youtube.com/embed/${featuredVideo}`} />

But you are getting featuredVideo, videoTitle and ...props (the rest) in:

import React from 'react'
const Video = ({ featuredVideo, videoTitle, ...props }) => (
  <div className='video'>
    <iframe
      src={featuredVideo}
      title={videoTitle}
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      frameBorder='0'
      webkitallowfullscreen='true'
      mozallowfullscreen='true'
      allowFullScreen
    />
  </div>
)
export default Video

I think you are looking for:

import React from 'react'
const Video = ({ src , ...props }) => (
  <div className='video'>
    <iframe
      src={src}
      title={`Some title`}
      allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
      frameBorder='0'
      webkitallowfullscreen='true'
      mozallowfullscreen='true'
      allowFullScreen
    />
  </div>
)
export default Video

Keep in mind that you are not drilling down any further props to the Video component in ...props so you will need to refactor the ArtistContainer with something like:

import Video from './components/video'
const ArtistContainer = ({ data }) => {
  const classes = useStyles()
  const {
    firstName,
    lastName,
    city,
    currentTeam,
    bio,
    twitter,
    instagram,
    email,
    whatWeLove,
    featuredVideo,
    recentPerformance,
  } = data.artistsJson

  return (
...
 <Video src={`https://www.youtube.com/embed/${featuredVideo}`} videoTitle= {videoTitle} />

In order to get the videoTitle in the children component.