I'm using React to create a control to view files on a remote system and would like the UI to show exactly one of them as selected so I put this code together which mostly works but allows an item to be selected in each subtree instead of a single global item.

I thought I may need to move the property up one level which is what the commented out code does but then I get a TypeError stating that "setActiveItem is not a function".

I don't understand why it didn't work correctly in the first place or why I get the exception when I move the property up a level. What gives?

Thanks

.highlight-div {
  cursor: pointer;
  transition: background-color 0.3s;
}

.highlight-div.active {
  background-color: lightgrey;
}

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

import App from "./App";

const root = createRoot(document.getElementById("root"));
root.render(
  
    
  
);

import { useState } from 'react';

const files = {
    "name": "root", "type": "directory", "children": [
        { "name": "folder 1", "type": "directory", "children": 
            [
                { "name": "file 1", "type": "file"},
                { "name": "file 2", "type": "file"},
                { "name": "file 3", "type": "file"},
            ] 
        }, 
        { "name": "folder 2", "type": "directory", "children": 
            [
                { "name": "file 1", "type": "file"},
                { "name": "file 2", "type": "file"},
                { "name": "file 3", "type": "file"},
            ]
        },
        { "name": "folder 3", "type": "directory", "children": 
            [
                { "name": "file 1", "type": "file"},
                { "name": "file 2", "type": "file"},
                { "name": "file 3", "type": "file"},
            ] 
        }
    ]
}

export default function App() {
    return (
        

            
        
    );
}

//export default function App() {
//    const [activeItem, setActiveItem] = useState(null)
//
//    return (
//        

//            
//        
//    );
//};

//function FileExplorer({ files, activeItem, setActiveItem }) {
function FileExplorer({files}) {
    const [activeItem, setActiveItem] = useState(null)

    return (
        

            {
                files.map((file, index) => (
                    file.type === 'directory' ? (
                        
                    ) : (
                        
                    )
                ))                
            }

        
    );
};

function FileItem({ id, file, activeItem, setActiveItem }) {

    function handleClick() {
        console.log(`Old ID: ${activeItem}`)
        console.log(`New ID: ${id}`)
        try {
            setActiveItem(id)
        }
        catch (error) {
            console.log(error)
        }
    };

    return (
        

            📄 {file.name}
        
    );
};

function FolderItem({ folder }) {
    const [isOpen, setIsOpen] = useState(false);

    const toggleOpen = () => setIsOpen(!isOpen);

    return (
        

            

                {isOpen ? '📂' : '📁'} {folder.name}
            
            {isOpen && }
        
    );
};