Working HTML filter but not correct method

<!doctype html>
<html lang="en">
<head>
    <title>Employees</title>
    <script src="mfiles.extensibility.protocol.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <div id="content"></div>
    <div id="toolbar">
        <label for="departmentFilter">Filter by Department:</label>
        <select id="departmentFilter">
            <option value="">-- Choose Department --</option>
        </select>
        <button id="clearFilter">Clear Filter</button>

        <label for="jobTitleFilter">Filter by Job Title:</label>
        <select id="jobTitleFilter">
            <option value="">-- All Job Titles --</option>
        </select>
        <button id="clearJobFilter">Clear Job Filter</button>
    </div>

    <div id="myGrid" class="ag-theme-alpine" style="height: 500px;  width: 100%;"></div>
    <script>
        let gridApi = null;
        let allEmployees = [];
        let currentViewJson = null;

        async function OnNewDashboard(newDashboard) {
            var torJsonString = await newDashboard.ShellFrame.ShellUI.Vault.VaultExtensionMethodsOperations.RunExtensionMethod({
                method_name: "GetEmployeeDTOs",
                input: "1234",
            });
            allEmployees = JSON.parse(torJsonString.output);
            var torJson = JSON.parse(torJsonString.output);
            currentViewJson = torJson;

            console.log(torJson);

            const gridOptions = {
                rowData: torJson,
                columnDefs: [
                    //{
                    { field: "fullName", headerName: "Name" },
                    { field: "employeeId", headerName: "Employee ID" },
                    { field: "department", headerName: "Department" },
                    { field: "jobTitle", headerName: "Job Title" },
                    { field: "totalDays", headerName: "Total Days" },
                    { field: "ObjID", headerName: "ObjID", hide: true },
                    { field: "ObjVersion", headerName: "Version", hide: true },
                    { field: "ObjTypeID", headerName: "Type ID", hide: true }


                ],
                defaultColDef: {
                    flex: 1,
                    resizable: true,
                    filter: true
                },
                rowData: allEmployees,
                onGridReady: function (params) {
                    gridApi = params.api;
                }
            };

            const gridDiv = document.querySelector("#myGrid");
            agGrid.createGrid(gridDiv, gridOptions);
            //gridApi = gridOptions; // Store the grid API for later use
            populateDropdown(); // Populate the department filter dropdown
            // Set initial row data


            /*
            if (gridDiv) {
                agGrid.createGrid(gridDiv, gridOptions);
                window.gridApi = gridOptions.api; // store globally

            }

            const result = await newDashboard.ShellFrame.ShellUI.Vault.VaultExtensionMethodsOperations.RunExtensionMethod({
                method_name: "GetEmployeeDTOs",
                input: ""
            });
            console.log("Raw result from extension:", result); // <- log entire object

            //const gridApi = agGrid.createGrid(gridDiv, gridOptions);
            //gridApi.sizeColumnsToFit(); // Auto-resize columns to fit width
            */
            function populateDropdown() {
                const dropdown = document.getElementById("departmentFilter");
                const uniqueDepartments = [...new Set(allEmployees.map(e => e.department).filter(Boolean))];

                uniqueDepartments.forEach(dept => {
                    const option = document.createElement("option");
                    option.value = dept;
                    option.textContent = dept;
                    dropdown.appendChild(option);
                });

                dropdown.addEventListener("change", () => {
                    const selected = dropdown.value;
                    console.log("Selected department:", selected);

                    if (selected === "") {
                        //gridApi.setRowData(allEmployees);
                        gridApi.setGridOption("rowData", allEmployees);

                    } else {
                        const filtered = allEmployees.filter(emp => emp.department === selected);
                        console.log("Filtering by department:", filtered);
                        console.log("gridApi:", gridApi);
                        //gridApi.setRowData(filtered);
                        gridApi.setGridOption("rowData", filtered);
                    }
                });

                document.getElementById("clearFilter").addEventListener("click", () => {
                    dropdown.value = "";
                    gridApi.setGridOption("rowData", currentViewJson);
                    // gridApi.setRowData(allEmployees);
                });

                const jobTitleDropdown = document.getElementById("jobTitleFilter");
                const uniqueJobTitles = [...new Set(allEmployees.map(e => e.jobTitle).filter(Boolean))];

                uniqueJobTitles.forEach(title => {
                    const option = document.createElement("option");
                    option.value = title;
                    option.textContent = title;
                    jobTitleDropdown.appendChild(option);
                });

                jobTitleDropdown.addEventListener("change", () => {
                    const selected = jobTitleDropdown.value;
                    console.log("Selected job title:", selected);
                    if (selected === "") {
                        //gridApi.setRowData(allEmployees);
                        gridApi.setGridOption("rowData", allEmployees);
                    } else {
                        const filtered = allEmployees.filter(emp => emp.jobTitle === selected);
                        console.log("Filtering by job title:", filtered);
                        //gridApi.setRowData(filtered);
                        gridApi.setGridOption("rowData", filtered);
                    }
                });

                document.getElementById("clearJobFilter").addEventListener("click", () => {
                    jobTitleDropdown.value = "";
                    gridApi.setGridOption("rowData", currentViewJson);
                    // gridApi.setRowData(allEmployees);
                });

            }
        }
    </script>

</body>
</html>