AG-Grid Custom Cell Renderer Dropdown issue

I'm trying to make a custom cell renderer for AG-Grid that contains a dropdown menu. When an option is selected, I want the dropdown value to be exported as a grid value. Basically, I need my dropdown values to be saved when I export the grid data. I know it can be done with the paid version more easily but this is for a very small work project and we don't have the budget to pay for the licence. I know I'm pretty close to the solution. I've read and re-read the official docs a million times. From what I understand, I need to tell the cell renderer what the value will be but I'm not sure how. Here's my code now :

    <script>
        
        // set custom column definition for dropdown choices (GL)
        var customColDef = function(params) {
            var options = '<option selected disabled hidden>SVP choisir</option>'
            var GL_raw = JSON.parse({{deragon_user_data|tojson}}); // this is from my Mongo/Flask backend
            var GLs = GL_raw.GL;
            for (const [key,value] of Object.entries(GLs)) {
                options += `<option value=${value}>${key}</option>`;
            }
            var html = `<select class="form-select GL-dropdown">${options}</select>`;
            return html;
        }

        // specify the columns
        const columnDefs = [
        { headerName: "Nom", field: "Nom", width:"200px" },
        { headerName: "Date", field: "Date", width:"100px" },
        { headerName: "Province", field: "Province", width:"110px" },
        { headerName: "Description", field: "Description", width:"350px" },
        { headerName: "GL", field: "GL", width:"220px", cellRenderer: customColDef, cellEditor: 'agRichSelectCellEditor'},
        { headerName: "Commentaire", field: "Commentaire", width:"495px", editable: true, resizable: true },
        { headerName: "Frais", field: "Frais", type: 'numericColumn', width:"105px" },
        { headerName: "TPS", field: "TPS", type: 'numericColumn', width:"90px" },
        { headerName: "TVQ", field: "TVQ", type: 'numericColumn', width:"90px" },
        { headerName: "TVH", field: "TPS", type: 'numericColumn', width:"90px" },
        { headerName: "Total", field: "Total", type: 'numericColumn', width:"105px" }
        ];

        // get expenses data from DB
        const rowData = JSON.parse({{expenses|tojson}}); // this is from my Mongo/Flask backend

        // config grid options
        const gridOptions = {
            columnDefs: columnDefs,
            rowData: rowData,
            rowSelection: 'single'
        };

        // lookup grid container
        const eGridDiv = document.querySelector('#myGrid');

        // create the grid with div & options
        new agGrid.Grid(eGridDiv, gridOptions);

        // print data to console
        function getGridData(){
            console.log(gridOptions.api.getDataAsCsv());
        }

        // download csv
        function exportGridData(){
            gridOptions.api.exportDataAsCsv();
        }

        // update back-end DB with the grid's data
        function updateGridData(){
            const newData = gridOptions.api.getDataAsCsv();
            var xhttp = new XMLHttpRequest();
            xhttp.open("POST", "https://<ENDPOINT_REDACTED>/update-user", true); 
            xhttp.setRequestHeader("Content-Type", "application/json");
            xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                var response = this.responseText;
            }
            };
            xhttp.send(JSON.stringify(newData));
        }
    </script>

Here's a screenshot of the result :

Any idea what I'm doing wrong?

Thank you in advance!

UPDATE : Updated code and added a screenshot of the results. Unfortunately, when I export, I still get an empty value (even though the dropdown value is good)