Функция .map в реакции вызывает ошибку

Я пишу этот код, в котором мне нужно сопоставить массив с некоторыми элементами div...

есть первый код, который имеет отображение и пользовательский интерфейс

import { useContext } from "react";
import "./index.scss";
import { PlaygroundContext } from "../../../Providers/PlaygroundProvider";
// import { logo } from "./logo.png"
// import { vlogo } from "./vlogo.png";


const Folder = ({folderTitle, cards}) =>{
      <div className = "folder-container">
                 <div className = "folder-header">
                    <div className = "folder-header-item">
                    <span class = "material-symbols-outlined" style = {{color: "yellow"}}>{{folderTitle}}</span>
                    <span>{"Folder 1"}</span>
                     </div>
                    <div className = "folder-header-item">
                    <span class = "material-symbols-outlined">delete</span>
                    <span class = "material-symbols-outlined">edit</span>
                    <button>
                    <span class = "material-symbols-outlined">add</span>
                    <span>New File</span>
                    </button>
                    </div>
                </div>
                <div className = "cards-container">
                {
                  cards?.map((file, index) => {
                    return(  <div className = "card" key = {index}>
                      {/* Logo=> <span class = "material-symbols-outlined">article</span> */}
                      <img src = {require('./vlogo.png')} />
                        <div className = "title-container">
                            <span>{file?.title}</span>
                            <span>Language: {file?.language} </span>
                         </div>
                        <div style = {{display: 'flex', gap: '10px'}}>
                        <span class = "material-symbols-outlined">delete</span>
                        <span class = "material-symbols-outlined">edit</span>
                        </div>
                      
                    </div>)
                  })
                }
            </div>
          </div>
} 

export const RightComponent = () => {
  
  const folders = useContext(PlaygroundContext);
  console.info(folders); 


    return(
        <div className = "right-container">
            <div className = "header">
                Code Projects
                <button className = "add-folder">
                <span class = "material-symbols-outlined">add</span>
                    <span>New Folder</span>
                </button>
            </div>
            {
                  folders?.map((folder, index) => {
                    return<Folder folderTitle = {folder.title} key = {index} cards = {folders.files}/>;
                  })  
            }
        

        </div>
    );
}

а вот контейнер

import { createContext, useContext, useEffect, useState } from "react";
import {v4} from 'uuid';

export const PlaygroundContext = createContext();

const initialData = [
    {
        id:v4(),
        title: 'DSA',
        files: [
            {
                title: 'codewala',
                id:v4(),
                language: 'cpp',
                code:':Ldkidm'
            },
            {
                title: 'codewala2',
                id:v4(),
                language: 'cpp',
                code:':Ldkidmccccccc'
            }
            
        ]

    }
]

export const PlaygroundProvider = ({children}) =>{
    const [folders, setFolders] = useState(initialData);


    useEffect(() => {
        localStorage.setItem('data', JSON.stringify(folders))
    },[])
    const uniqId = v4();
    // console.info(uniqId);
    const obj = {name: 'divyansh'};
    return( 
//  <>{children}</>
    <PlaygroundContext.Provider value = {{folders}}> 
    {children}
</PlaygroundContext.Provider>
    );
};

Я не знаю почему, но отображение показывает ошибку

ошибка

folders.map is not a function
TypeError: folders.map is not a function
    at RightComponent (http://localhost:3000/static/js/bundle.js:428:78)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:24807:22)
    at mountIndeterminateComponent (http://localhost:3000/static/js/bundle.js:28778:17)
    at beginWork (http://localhost:3000/static/js/bundle.js:30081:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:15063:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:15107:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:15164:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:35062:11)
    at performUnitOfWork (http://localhost:3000/static/js/bundle.js:34310:16)
    at workLoopSync (http://localhost:3000/static/js/bundle.js:34233:9)

Я пытался преобразовать данные JSON в строку, но это не помогает. Я также видел другие вопросы о stackoverflow, но они не помогают.