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 "./playground.scss";
import codelogo from "./vlogo.png";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";
import { Navigate } from "react-router-dom";
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 homepage = () => {
        Navigate(`/`);
    }

    const onSaveCode = () => {
        saveCode(fileId, id, codeRef.current)
        alert("Code Saved");
    }

   const params = useParams();
   console.log(params)
    const {fileId, id   } = params;  
    return(
        <div className="main-container">
            <div className="title-container">
                <div className="brand-container">
                <img src={ codelogo }></img>
                </div>
                <div className="button-container">
                <span class="material-symbols-outlined" onClick={onSaveCode}>save</span>
                <span class="material-symbols-outlined" onClick={homepage}>arrow_back</span>
                {/* <div className="purple-stuff"><br></br></div> */}
                </div>
            </div>

            <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 "./EditorContainer.scss"
import Editor from "@monaco-editor/react";
import { PlaygroundContext } from "../../Providers/PlaygroundProvider";

const editorOptions={
    theme: 'vs-dark',
    wordWrap: 'on' 
    }

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

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

    const onChangeCode = (newCode) =>{
        console.log(newCode);
        // setCode(newCode);
        codeRef.current = newCode;
    }

    return(
        <div className="root-editor-container">
                {/* <h1>YAHOOO</h1> */}
                <Editor 
                height={"100%"}
                language={"javascript"}
                options={editorOptions}
                theme={'vs-dark'}  
                onChange={onChangeCode}
                />
        </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 localData = localStorage.getItem('data');
        if(localData){
            return JSON.parse(localData);
        }
        return initialData;
    });


    const editFolderTitle = (newFolderName, id) => {
        const updatedFoldersList = folders.map((folderItem) => {
            if(folderItem.id === id){
                folderItem.title = newFolderName;
            }
        })
        localStorage.setItem('data', JSON.stringify(updatedFoldersList))
        setFolders(updatedFoldersList);

    }

    const createNewPlayground = (newPlayground) => {
        // console.log ({newPlayground}, "inside pgprov")
        const {folderName, language} = newPlayground;
        const newFolders = [...folders];
        newFolders.push({
            id: v4(),
            title: folderName,
            files: []
        })
        localStorage.setItem('data', JSON.stringify(newFolders));
        setFolders(newFolders);
    }

    const createNewFile = (newFilesystem) => {
        const {fileName, language} = newFilesystem;
        const newFile = [...folders]
        newFile.push({
           id:v4(),
            title:fileName,
            files: [{
                id: v4(),
                title: fileName,
                language: language
            }]
            
        })

        const allFolders = [...folders, newFile] 

        localStorage.setItem('data', JSON.stringify(newFile));
        setFolders(newFile);

    }

    const deleteFolder = (id) => {
        const updatedFoldersList = folders.filter((folderItem) => {
            return folderItem.id !== id;
        })

        localStorage.setItem('data', JSON.stringify(updatedFoldersList));
        setFolders(updatedFoldersList);
    }


    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 [modalPayload, setModalpa]

    const playgroundFeatures = {
        folders,
        // files,
        createNewPlayground,
        createNewFile,
        deleteFolder,
        editFolderTitle,
        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