React - how to do multiple query for axios call

This is my current design using below code, which works correctly.
If I enter text in Search input, and select searchBy in dropdown, and click search button,
The searching is done.

SandBox:
https://codesandbox.io/s/twilight-firefly-i4osi?file=/Search.js
it uses jsonplaceholder for example , although jsonPlaceholder not accepy query

Search.js

var globalSearchValue = ''
var globalSearchID = ''

function Search(props) {

const columns = [
    { key: 'id', numeric: false, disablePadding: false, label: 'id' },
    { key: 'fullName', numeric: false, disablePadding: false, label: 'Name' },
];

const searchableColumns = [
    { key: 'id', label: 'ID' },
    { key: 'fullName', label: 'Full Name' },
];

  const [searchBy, setSearchBy] = useState(columns[0].key);
  const [searchValue, setSearchValue] = useState('');

async function fetchData(searchBy, value) {
    
    const sort = `$sort[${orderBy}]`;
    let params = {
      $limit: 50,
      $skip: 0,
      [sort]: 1
    };
    if (searchBy && value) {
      const search = `${searchBy}[$like]`;
      params = { ...params, [search]: '%' + value + '%', };
    }

      setLoading(true);
      const response = await getTableData(params); // api call which is from another file
      if (response.status >= 400) {
        sessionStorage.clear();
        window.location.reload(false);
      } else {
        const dataList = disablePagination ? _.get(response, 'data') : _.get(response, 'data.data');
        setTotal(_.get(response, 'data.total'));
        setData(disablePagination ? dataList : addColumn(dataList));
        setLoading(false);
      }
    
  }

  const search = async () => {
    globalSearchValue = searchValue;
    globalSearchID = searchBy
    
    fetchData(searchBy, searchValue);
  }

   return(
        <Box display="flex" flexDirection="row" alignItems="center">
          <FormControl style={{ width: 200, marginRight: 3 }}>
            <BootstrapInput
              placeholder='Search'
              value={searchValue}
              onChange={(event) => setSearchValue(event.target.value)}
            />
          </FormControl>
          <FormControl style={{ width: 200 }}>
            <Select
              value={searchBy}
              onChange={(event) => setSearchBy(event.target.value)}
              input={<BootstrapInput />}
            >
              {searchableColumns ?
                searchableColumns.map(columns => <MenuItem key={columns.label} value={columns.key}>{columns.label}</MenuItem>)
                : columns.map(columns => <MenuItem key={columns.label} value={columns.key}>{columns.label}</MenuItem>)}
            </Select>
          </FormControl>
          <Tooltip title="Search" style={{ marginLeft: 5, marginRight: 30 }}>
            <SearchIcon aria-label="Search" onClick={() => {search()}} />
          </Tooltip>
        </Box>
   )
 }

Api.js

    getAPI = path => params => {
        const body = {
            method: 'GET',
            url: this.baseUrl + path,
            params
        }
        return this.axios(body).then(response => {
            return Promise.resolve(response);
        }).catch(error => {
            if (error.response) {
                return Promise.resolve(error.response);
            }
            else {
            }
            return Promise.resolve(error);
        });
    };
...
getTableData = this.getAPI('/users');

If I want to add one more filter as shown below:

How should I handle it as I find it difficult to include 1 more filter.
Do I need to get involved for backend code?
Please let me know if more details are needed.