I am using react with typescript, to make a page for managing a users files and folders.
The page contains three tabs, one for the users own files, one for files shared with him and his recycle bin.

I am thinking of handling the calls to the the storage api in a StorageProvider, which would have functions like FetchMyFiles, FetchRecycleBin, RenameFolder and also store the fetched data for use by underlying components.

Any child component would then be able to call the functions and update the context for everyone. The main app component could for example call getMyFolders when the tab is selected and a RenameFolder component could call RenameFolder.

Does this approach make sense in react, and if so, how do I update the folders state in the code below?

export const FoldersContext = createContext<FoldersContextType | undefined>(undefined);

type FoldersContextType = {

    myFolders: JsonFolder | undefined;
    recycleBin: JsonFolder | undefined;
    sharedFolders: JsonFolder | undefined;
    getRecycleBin(signal: AbortSignal): Promise<JsonFolder | undefined>;
    getMyFolders(signal: AbortSignal): Promise<JsonFolder | undefined>;

}

type StorageProviderProps = {
    apiBaseUrl: string;
    children: ReactNode;
}

export default function StorageProvider(props: StorageProviderProps) {

    const [folders, setFolders] = useState<FoldersContextType | undefined>(
    { myFolders: undefined, recycleBin: undefined, sharedFolders: undefined, 
    getRecycleBin: getRecycleBin, getMyFolders: getMyFolders });

    async function getRecycleBin(signal: AbortSignal): Promise<JsonFolder | undefined> {
        //Code for getting recycle bin
        return recycleBin;
    }

    async function getMyFolders(signal: AbortSignal): Promise<JsonFolder | undefined> {
        //Code for getting user folders
        return userFolders;
    }

    return (
        <FoldersContext.Provider value={folders}>
            {props.children}
        </FoldersContext.Provider>
    );

}