Sample folder explorer in a SharePoint React application

Question

I have a react application using fluentui and pnp libraries in a SharePoint application.
I would like to let users select a folder from the site content.

I started a sample in StackBlitz with the following (gpt) suggestion

import React, { useState, useEffect } from 'react';
import { Dialog, Breadcrumb, List } from '@fluentui/react';
import { sp } from '@pnp/sp';

const FolderPicker = (props) => {
  const [isOpen, setIsOpen] = useState(false);
  const [folders, setFolders] = useState([]);
  const [currentPath, setCurrentPath] = useState('/');

  useEffect(() => {
    // Fetch folders from SharePoint API using the current path
  }, [currentPath]);

  const onFolderClick = (folder) => {
    // Set the current path to the clicked folder's path
  };

  const onBreadcrumbItemClick = (path) => {
    // Set the current path to the clicked breadcrumb item's path
  };

  return (
    <Dialog isOpen={isOpen}>
      <Breadcrumb
        items={currentPath.split('/').map((path) => ({
          text: path,
          onClick: () => onBreadcrumbItemClick(path),
        }))}
      />
      <List
        items={folders}
        onRenderCell={(folder) => (
          <div onClick={() => onFolderClick(folder)}>{folder.name}</div>
        )}
      />
    </Dialog>
  );
};

export default FolderPicker;

However it seems the GPT code is a little obsolete and does not work,

Error in /turbo_modules/react@18.2.0/cjs/react.development.js (1630:21) Cannot read properties of null (reading 'useRef')

or also

Type '{ text: string; onClick: () => void; }[]' is not assignable to type 'IBreadcrumbItem[]'. Property 'key' is missing in type '{ text: string; onClick: () => void; }' but required in type 'IBreadcrumbItem'.(2322)

could you suggest a correction ( or different implementation)?