React не отображает мои компоненты в функции .map() ⇐ Javascript

[Anonymous]

Я разрабатываю сайт, и мне нужно создать дерево файлов.
В моем проекте есть макет объекта для тестирования:
const files = [
{
id: 232141332,
title: "Documents",
type: "FOALDER",
opened: false,
level: 0,
fatherId: null,
children: [
{
id: 734573086,
title: "MA5600",
type: "FOALDER",
opened: false,
level: 1,
fatherId: 232141332,
children: [
...

Мой файл App.js:
function App() {
return (





);
}

export default App;

Компонент Sidebar.jsx:
import files from '../../../store/files'

function Sidebar(){
return(

{console.log(files)}
{files.map((root) => {

})}

);
}

export default Sidebar;

Компонент TreeNode.jsx:
import classes from "./TreeNode.module.css"

function TreeNode({item}){
return (








{item.title}



{item.children?.map((x) => (

))}


);
}

export default TreeNode;

Это все, но в браузере я вижу ничего, просто центрированный элемент div с оболочкой класса.
Я вижу свои файлы в консоли, но мои TreeNodes не отображаются. . В чем может быть проблема?
Также у меня есть предупреждение в консоли:
Ошибка карты кода: Error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Stack in the worker:parseSourceMapInput@resource://devtools/client/shared/vendor/source-map/lib/util.js:163:15
_factory@resource://devtools/client/shared/vendor/source-map/lib/source-map-consumer.js22
SourceMapConsumer@resource://devtools/client/shared/vendor/source-map/lib/source-map-consumer.js:26:12
_fetch@resource://devtools/client/shared/source-map-loader/utils/fetchSourceMap.js:83:19

URL ресурса: http://localhost:3000/%3Canonymous%20code%3E
URL карты кода: installHook.js.map


Подробнее здесь: https://stackoverflow.com/questions/793 ... p-function