Undefined index 0 reactjs api

Saya mau panggil state data yang isinya fetching dari api, cuma masalahnya saat dipanggil di method render() ngeload dulu yang kosong baru load data json api nya. jadi kalo dipanggil di method render() error index 0 undefined (Saya select data array pertama). tapi kalo saya eksekusi di componentDidMount di console dia gak undefined.

import React from 'react';
import YoutubeComp from '../../component/youtube/YoutubeComp';
import './../../../node_modules/bootstrap/dist/css/bootstrap.min.css'

class Home extends React.Component {
	state = {
		// loading: true,
		data: []
	}

	async componentDidMount () {
		const urlFetch = await fetch('https://www.googleapis.com/youtube/v3/search?key=SECRET_API_KEY_HERE&part=snippet&channelId=UCkXmLjEr95LVtGuIm3l2dPg&maxResults=4');
		const data = await urlFetch.json();

		this.setState({ data: data });
		console.log(this.state.data);
	}

	render () {
		// var item = this.state.data.items;
		console.log(this.state.data);
		return (
			<div className="container-fluid">
				<div className="row">
					<div className="col-3">
						<YoutubeComp
							// thumb={ this.state.data.items[0].snippet.thumbnails.default.url }
							// title={ this.state.data.items[0].snippet.title }
							// desc={ this.state.data.items[0].snippet.description }
						/>
					</div>
					<div className="col-3">
						<YoutubeComp/>
					</div>
					<div className="col-3">
						<YoutubeComp/>
					</div>
					<div className="col-3">
						<YoutubeComp/>
					</div>
				</div>
			</div>
		)
	}
}

export default Home;

Kira kira gimana solusinya ya mas?