Display folders for an object according to a picklist value using lwc

Question

Hi all I have an object name FS where I have uploaded various files in each records. Also in the content version record I have a picklist value named Category which has certain picklist values New and Archived.

I have given the version detail of the FS Files the particular picklist value. Say A file has New picklist value and B file has Archived as picklist value.

Now in the FS object I have to create a lwc component to display two folders each having files according to the picklist values. One folder for displaying files with New picklist files and the other with Archived picklist files.

Can I get an input on how to do this using lwc?

I have done the code this way:

   public class LwcFolderDifferentiator {
    @AuraEnabled(cacheable=true)
    public static Map<ID, String> getRelatedFilesByRecordId(String recordId) {
        // Get record file IDs        
        List<ContentDocumentLink> files = [SELECT ContentDocumentId FROM ContentDocumentLink WHERE LinkedEntityId = :recordId];
        List<ID> fileIDs = new List<ID>();
        for (ContentDocumentLink docLink : files) {
            fileIDs.add(docLink.ContentDocumentId);
        }
 
        List<ContentVersion> docs = [SELECT ContentDocumentId, FileExtension, Title, Category__c
            FROM ContentVersion WHERE ContentDocumentId IN : fileIDs];
        Map<ID, String> mapIdTitle = new Map<ID, String>();
        for (ContentVersion docLink : docs) {
            mapIdTitle.put(docLink.ContentDocumentId, docLink.Title);
        }
        return mapIdTitle;
    }

}

JS:

import { LightningElement,wire,api} from 'lwc';
import getRelatedFilesByRecordId from '@salesforce/apex/LwcFolderDifferentiator.getRelatedFilesByRecordId';
import {NavigationMixin} from 'lightning/navigation'
export default class LWCFoldersFSR extends LightningElement {
    filesList =[];
    @api recordId;
    @wire(getRelatedFilesByRecordId, {recordId: '$recordId'})
    wiredResult({data, error}){ 
        if(data){ 
            console.log(data)
            this.filesList = Object.keys(data).map(item=>({"label":data[item],
             "value": item,
             "url":`/sfc/servlet.shepherd/document/download/${item}`
            }))
            console.log(this.filesList)
        }
        if(error){ 
            console.log(error)
        }
    }
    previewHandler(event){
        console.log(event.target.dataset.id)
        this[NavigationMixin.Navigate]({ 
            type:'standard__namedPage',
            attributes:{ 
                pageName:'filePreview'
            },
            state:{ 
                selectedRecordId: event.target.dataset.id
            }
        })
    }
}

html:

<template>
    <lightning-card title="File Preview and Download">
         <template for:each={filesList} for:item="file">
             <div key={file.value} class="slds-box">
                 <div class="slds-grid slds-wrap">
                     <div class="slds-col slds-large-size_4-of-12 slds-medium-size_4-of-12 slds-size_12-of-12">
                       <p><strong>FileName - </strong>{file.label}</p>
                     </div>
                     <div class="slds-col slds-large-size_4-of-12 slds-medium-size_4-of-12 slds-size_12-of-12">
                       <a href={file.url} download>Download</a>
                     </div>
                     <div class="slds-col slds-large-size_4-of-12 slds-medium-size_4-of-12 slds-size_12-of-12">
                       <lightning-button label="Preview" 
                       variant="brand"
                      data-id={file.value}
                      onclick={previewHandler}
                       ></lightning-button>
                     </div>
                   </div>
             </div>
         </template>
    </lightning-card> 
    
 </template>

I have called the category picklist in the apex class.How do I use it as a toggle such that New files are shown in one folder and Archived in another?