Why is DataTable state not saved despite manually updating search and using table.state.save() in an external function on input change?

The issue arises when attempting to manually update the search value for the ‘event_name’ column in a DataTable. In the DataTable initialization (initComplete), an input element is dynamically created for each column with the class ‘search’, allowing users to filter data. Additionally, an external function is triggered on the change event of an external input (#event_name). This function aims to update the DataTable’s search value for the ‘event_name’ column, save the state, and redraw the DataTable.

However, despite the manual efforts to update the search value and save the state, the DataTable state is not reflecting the changes made to the search value for the ‘event_name’ column. Further investigation is needed to understand why the DataTable state is not being saved as expected.

Here is the code for better context:

Initialization in DataTable:

initComplete: function () {
    let api = this.api();
    api.columns(".search").every(function () {
        let column = this;
        let columnName = api.settings().init().columns[column.index()].name;

        let title = column.header().textContent;
        let input = document.createElement('input');
        input.classList.add("form-control");
        input.classList.add("form-control-sm");
        input.classList.add(columnName);
        input.placeholder = title;

        table.context[0].json.input.columns.forEach(function (column) {
            if(column.name == columnName){
                input.value = column.search.value;
                $('#' + column.name).val(column.search.value);
            }
        });

        column.footer().replaceChildren(input);

        input.addEventListener('keyup', () => {
            if (column.search() !== this.value) {
                column.search(input.value).draw();
            }
        });
    });
}

***External Function:***

$('#event_name').change(function () {
    $('.event_name').val(this.value);

    let eventColumn = table.column('event_name:name');
    eventColumn.search(this.value).draw();

    table.state.save();
    table.draw();
});

I attempted to manually update the search value for the 'event_name' column in a DataTable using the jQuery change event on the #event_name input field. I expected that, after updating the search value, calling table.state.save() and redrawing the DataTable with table.draw() would save the state, including the modified search value. However, the state was not saved as expected, and the DataTable did not reflect the changes made to the search value.