So I have this code where I want the code to be saved whenever I press the save button it is not happening, it isnt giving any errors but, it is not storing anything…

Here are the code, this is index js where I have the save button.

import { useNavigate, useParams } from "react-router-dom";
import { useRef, useState } from "react";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";
import { EditorContainer } from "./EditorContainer";
import { useContext } from "react";
import Editor from "@monaco-editor/react";
export const PlaygroundScreen = () =>{


    const [code, setCode] = useState('');   
    const codeRef = useRef();
    const  {saveCode} = useContext(PlaygroundContext);
    const Navigate = useNavigate();

    const onSaveCode = () => {
        saveCode(fileId, id, codeRef.current)
        alert("Code Saved");
    }
 
                </div>
                <div className="button-container">
                <span class="material-symbols-outlined" onClick={onSaveCode}>save</span>
            <div className="code-container">
                <EditorContainer codeRef={codeRef} />
            </div>
        </div>
    );
}

This is the Editor-Container file with monaco running as the IDE

import { useRef, useState } from "react";
import Editor from "@monaco-editor/react";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";

export const EditorContainer = ({codeRef}) =>{

    const [code, setCode] = useState('');
    // const codeRef = useRef();

    return(
        <div className="root-editor-container">
                {/* <h1>YAHOOO</h1> */}
                <Editor />
        </div>
    )
}

and finally this is the playground provider

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

export const PlaygroundContext = createContext();

// Data Array
const initialData = [
    {
        id:v4(),
        title: 'Project 1',
        files: [
            {
                title: 'index.js',
                id:v4(),
                language: 'javascript',
                code:':Ldkidm',
            },
            {
                title: 'dsa.js',
                id:v4(),
                language: 'javascript',
                code:':Ldkidm',
            },
            {
                title: 'right-container.js',
                id:v4(),
                language: 'javascript',
                code:':Ldkidmccccccc',
            }
            
        ]

    },
    {
        id:v4(),
        title: 'Project 2',
        files: [
            {
                title: 'index.js',
                id:v4(),
                language: 'javascript',
                code:':Ldkidm',
            },

            {
                title: 'routing.js',
                id:v4(),
                language: 'javascript',
                code:':Ldkidmccccccc',
            }
            
        ]

    }
    
    
];
//Main Func
export const PlaygroundProvider = ({children}) =>{

    const [folders, setFolders] = useState(() => {

    const saveCode = (fileId, id, newCode) => {
        const newFolders = [...folders]
        for(let i=0 ; i < newFolders.length; i++){
            if(newFolders[i].id === id){
                for(let j = 0 ; j < newFolders[i].files.length; j++){
                    const currentFile = newFolders[i].files[j];
                    // return currentFile.language;
                    if(fileId === currentFile.id){
                        newFolders[i].files[j].code = newCode;
                    }
                }
            }
        }
        localStorage.setItem('data', JSON.stringify(newFolders));
        setFolders(newFolders);
    }


    const playgroundFeatures = {
        saveCode
    }



    useEffect(() => {
        if(!localStorage.getItem('data')){
            localStorage.setItem('data', JSON.stringify(folders))
        }
    },[])


    const uniqId = v4();
    
    const obj = {name: 'divyansh'};
    
    return( 
    <PlaygroundContext.Provider value={ playgroundFeatures }> 
    {children}
    </PlaygroundContext.Provider>
    );

        
};

Kindly tell me why is it not storing anything
Also I am a beginner so pls keep it in your mind

I tried removing Editor Container by putting the code in the index.js itself but it isnt working

I tried almost everything i could it didnt help