TikTok UI Clone not working of React Course.

Can anyone tell me why my videos are not coming in my application?

I am sharing my code with you all.

App.js

import React, { useEffect, useState } from 'react' import Video from './Video' import './App.css'

const API_URL = 'https://raw.githubusercontent.com/codedamn-classrooms/tiktok-react-material/main/data.json'

export default function App() { const [videos, setVideos] = useState([])

useEffect(() => {
	// TODO: Get the data from API_URL above
	// Store it inside videos state variable
    fetch(API_URL)
    .then((response)=>response.json())
    .then((data) => setVideos(data))

}, [])

return (
	<div className="app">
		<div className="container">
			{/* TODO: Loop over the API_URL data and render Video component */}
			{/* TODO: Make sure to assign the correct URL for each video */}
            {
                videos.map((vid,index) => {
                     return <Video  key={index} url={vid} />
                })
            }
			
		</div>
	</div>
)

}

Video.js

import React from 'react'

export default function Video(props) { const {url} = props

return (
	<div className="video">
		<video className="player" loop >
        <source src={url} />
        </video>
	</div>
)

}