How do I render folders within a folder in one component in React(Next.js)?

I’m not good at English so please be understanding.

First, please check my code.

const DriveFile = ({folderPk}) => {

    const [rootFolder, setRootFolder] = useState([])

    const viewFolder = async () => {
        const url = `/api/store/drive/view-folder?folderId=${folderPk}`
        await get(url)
        .then((res) => {
            setRootFolder(res.directChildrenFolders);
        })
        .catch((error) => {
            console.log(error)
        })
    };

    useEffect(() => {
        viewFolder()
    }, [folderPk]);

    const [folderName, setFolderName] = useState('');

    const folderNameChange = (e) => {
        setFolderName(e.target.value)
    }

    const createFolder = () => {
        const url = '/api/store/drive/create-folder';
        const data = {
            folderName: folderName,
            parentPK: folderPk
        }
        if (folderName.length == 0) {
            alert('please write the folder name');
            return;
        }
        post(url, data)
        .then((res) => {
            console.log('파일 생성', res)
            setFolderName('');
        })
        .catch((error) => {
            console.log(error)
        })
    };

    return (
        <div className={styles.fileDiv}>

            <input value={folderName} onChange={folderNameChange}/><button onClick={createFolder}>ADD FOLDER</button>
            {
                rootFolder?.map((root) => (
                    <div>{root.FOLDER_NAME}</div>
                ))
            }
        </div>
    )
}

export default DriveFile

Here. this is my component.

The props, {folderPk}, is just a number that I selected from the top root folder then I use GET request using folderPk to render the direct child folders.

FYI, this is the UI.

So, when I click ‘FOLDER 1’, I get the specific FOLDER_PK. Then, I use it in different component to render subfolders like that.

However, my question is how can I get into a folder within a folder in a component.

For example, I’m trying to go into another folder when I click ‘FOLDER 4, UNDER FOLDER 1’ folder. I’m wondering can it be possible.

Is it possible in one component? or should I use different method?

Your answer will be really appreciated!!!!! 🙂