Writing terminal emulator in react, and ls command is not working in subfolder in root folder

I am trying to write a terminal emulator in a react app, for a personal coding website. I’m trying to create basic functionality, namely ‘pwd’, ‘ls’, ‘cat’ and ‘cd’. I have a react component that does all the work for the file explorer, which is basically used to keep track of the current folder. Here is the code:

import React, { useState } from 'react';

const FileExplorer = () => {
  const [currentDirectory, setCurrentDirectory] = useState('/home/user');
  const [fileContents, setFileContents] = useState({
    '/home/user/file1.txt': 'Content of file1.txt',
    '/home/user/file2.txt': 'Content of file2.txt',
    '/home/user/folder1': {
      '/home/user/file3.txt': 'Content of file3.txt',
    },
  });

  const [parentDirectory, setParentDirectory] = useState(null);

  const getCurrentDirectoryContents = () => {
    return listDirectory(currentDirectory);
  };

  const listDirectory = (directory) => {
    const entries = Object.keys(fileContents);
    const currentDirectoryEntries = entries.filter((path) =>
      path.startsWith(directory)
    );

    console.log('Current Directory Entries:', currentDirectoryEntries);

    const subdirectoryEntries = currentDirectoryEntries.filter(
      (path) => typeof fileContents[path] === 'object'
    );
    subdirectoryEntries.forEach((subdirectory) => {
      const subdirectoryPath = subdirectory + '/';
      const subdirectoryContents = listDirectory(subdirectoryPath);
      currentDirectoryEntries.push(...subdirectoryContents);
    });

    return currentDirectoryEntries;
  };

  const changeDirectory = (newDirectory) => {
    if (newDirectory === '..') {
      if (parentDirectory) {
        setCurrentDirectory(parentDirectory);
        setParentDirectory(null);
      } else {
        return 'cd: ../: No such file or directory';
      }
    } else if (newDirectory.startsWith('/')) {
      if (fileContents[newDirectory] && typeof fileContents[newDirectory] === 'object') {
        setParentDirectory(currentDirectory);
        setCurrentDirectory(newDirectory);
      } else {
        return `cd: ${newDirectory}: Not a directory`;
      }
    } else {
      const newPath = currentDirectory + '/' + newDirectory;
      if (fileContents[newPath] && typeof fileContents[newPath] === 'object') {
        setParentDirectory(currentDirectory);
        setCurrentDirectory(newPath);
      } else {
        return `cd: ${newDirectory}: Not a directory`;
      }
    }
  };

  const readFile = (filePath) => {
    if (filePath.startsWith('/')) {
      if (fileContents[filePath]) {
        return fileContents[filePath];
      } else {
        return `cat: ${filePath}: No such file or directory`;
      }
    } else {
      const fullPath = currentDirectory + '/' + filePath;
      if (fileContents[fullPath]) {
        return fileContents[fullPath];
      } else {
        return `cat: ${filePath}: No such file or directory`;
      }
    }
  };

  const ls = () => {
    const currentDirContents = getCurrentDirectoryContents();
    const relativePaths = currentDirContents.map((path) =>
      path.substring(currentDirectory.length)
    );
    return relativePaths.join(' ');
  };

  return { currentDirectory, getCurrentDirectoryContents, changeDirectory, readFile, ls };
};

export default FileExplorer;

The issue is, when I ‘cd’ into folder1, the file directory knows it’s in folder1 (pwd returns /home/user/folder1) but when I type ‘ls’, it does not print out that file3 is in the folder. Nor can I ‘open’ file3 using the cat command like I can the files in the root folders. What am I doing wrong here?

I’ve tried changing the folder structure around, and changing some of the functions, but no avail.