architecture – Modify method behaviour at runtime

I have a scenario where user has multiple filters in a web application and a displayed list of items. In the gui it has multiple FilterGUI that he/she can tune interacting in the browser (these are React web components).
Every specific implementation of the FilterGUI do the same: tune parameters and according to parameters create at runtime an arrow function that will filter (according to some algorithm/criteria) the dataset items.

Example:

i have data like this:

user {
    name: "bob",
    age: 25
    }
FilterGUI1 {
    createFilterFunction() {
         return (userSelectedInterval) => {
                      I filter user by age based on an interval selected by the user
                      }

    }
}
FilterGUI2 {
     createFilterFunction() {
          return (criteria1, criteria2 ...) => {
          i filter user item based on nested if else criteria  
          }
     }
}

It seems to me that createFilterFunction() may be replaced by a FilterFunctionFactory
such that:

FilterGUI {
    this.filterFunctionFactory = new FilterFunctionFactory()

    makeFilter(someParams) {
        return this.filterFunctionFactory.makeFilter(someParams)
    }
}

I read also something about Strategy pattern. In particular that it allows selection of an algorithm’s behaviour during runtime. Can this pattern be used somehow here to modify the filterFunction produced by the factory at runtime?
How would you do that ?
I’m not an expert on software design patterns by i would like to write this code in a much elegant way