Creating dynamic filter logic using DRY approach

I want to create a reusable filter function that works by passing in three properties

1. The users input
2. The data type
3. The data field that is being queried

So far I have created the following code

  const [filteredData, setFilteredData] = useState("");
  const [filterValue, setFilterValue] = useState("");
  
  const handleFilter = (e,type,field) => {
    setFilterValue(e)
    if (type === 'text') {
      const filterLowerCase = e.toLowerCase().trim()
      const result = props.searchResults.filter(d => 
      !filterLowerCase ||  d.field.toLowerCase().includes(filterLowerCase),
      );
      setFilteredData(result);
    }
  }

The issue is I don't know how to dynamically set the 'field' property.
The code works when the 'field' property is replaced with the actual field name, in the example below this is 'task_name' .

  const handleFilter = (e,type,field) => {
    setFilterValue(e)
    if (type === 'text') {
      const filterLowerCase = e.toLowerCase().trim()
      const result = props.searchResults.filter(d => 
      !filterLowerCase ||  d.task_name.toLowerCase().includes(filterLowerCase),
      );
      setFilteredData(result);
    }
  }

How can this code be written so that the field can be dynamically set.

You can use bracket notation like this:

  const [filteredData, setFilteredData] = useState("");
  const [filterValue, setFilterValue] = useState("");
  
  const handleFilter = (e,type,field) => {
    setFilterValue(e)
    if (type === 'text') {
      const filterLowerCase = e.toLowerCase().trim()
      const result = props.searchResults.filter(d => 
      !filterLowerCase ||  d[field].toLowerCase().includes(filterLowerCase),
      );
      setFilteredData(result);
    }
  }