selecting a node will show video in React Player

[charleneca]

I'm trying to code where if I click on a tree node, it will show a video in React Player component. But nothing shows up. my code is as below:
www.myloweslife.com
Map.js (I omitted some unimportant codes here)

import React, { useEffect, useState } from "react";
import { Tree } from 'primereact/tree';
import ReactPlayer from 'react-player';

import { NodeService } from '../service/NodeService';

const MapDemo = () => {
const [nodes, setNodes] = useState(null);
const [expandedKeys, setExpandedKeys] = useState({});
const nodeService = new NodeService();

const onSelect = (node) => {
setURL(node.children.data)
}

const [url, setURL] = useState()

useEffect(() => {
nodeService.getTreeNodes().then(data => setNodes(data));
}, []); // eslint-disable-line react-hooks/exhaustive-deps

return (
<div>
<div className="card">
<h2>Map</h2>
<Tree value={nodes} expandedKeys={expandedKeys}
onToggle={e => setExpandedKeys(e.value)} onSelect={onSelect}/>
<ReactPlayer align="center" url={url} key={url} controls="true" width="100%" height="425px" playing="true"/>
</div>
</div>
)
}

export default MapDemo;
treenodes.json

{
"root": [
{
"key": "0",
"label": "Main Building",
"data": "Buildings Folder",
"icon": "pi pi-fw pi-home",
"children": [{
"key": "0-0",
"label": "Floor 1",
"data": "Floor Folder",
"icon": "pi pi-fw pi-align-justify",
"children": [{ "key": "0-0-0", "label": "Camera 1", "icon": "pi pi-fw pi-video", "data": "https://www.youtube.com/watch?v=Rh7CJu-Ny4o" }, { "key": "0-0-1", "label": "Camera 2", "icon": "pi pi-fw pi-video", "data": "https://www.youtube.com/watch?v=UuGhhltfQi8" }]
}]
}
]
}
Any help is highly appreciated. Thanks in advance.