Tips for debugging YouTube thumbnail preview in portable content editor

import React from "react";
import getYouTubeID from "get-youtube-id";
import YouTube from "react-youtube";
import styled from "styled-components";

const YTPreview = styled(YouTube)`
	display: flex;
	justify-content: center;
`;

const YouTubePreview = ({ title }) => {
	const url = title.split(" ")[1];
	const id = getYouTubeID(url);
	const opts = {
		height: "183",
		width: "300",
	};
	return <YTPreview opts={opts} videoId={id} />;
};

const youtube = {
	name: "youtube",
	title: "YouTube Embed",
	type: "object",
	fields: [
		{
			name: "link",
			title: "Youtube Video URL",
			type: "url",
		},
	],
	components: {
		preview: YouTubePreview,
	},
};

export default youtube;

const YouTubePreview = (props) => {
    const { renderDefault, title } = props
	const url = title.split(" ")[1];
	const id = getYouTubeID(url);
	const opts = {
		height: "183",
		width: "300",
	};
	return (
      <div>
        { renderDefault(props) }
        <YTPreview opts={opts} videoId={id} />;
      </div>
    )
};