Fixed issues with React keys in Query page

This caused React to re-render the filter every time options were changed,
which appeared to user as if their changes did not apply properly.

Affects issues:
- Fixed #3086

Plan/react/dashboard/src/components/cards/query/FilterDropdown.js

@@ -52,7 +52,7 @@ const FilterDropdown = ({filterOptions, filters, setFilters}) => {
                 <h6 className="dropdown-header">{t('html.query.filters.add')}</h6>
                 <Scrollable>
                     {filterOptions.map(option => (
-                        <Dropdown.Item key={option} onClick={() => addFilter(option)}>
+                        <Dropdown.Item key={JSON.stringify(option)} onClick={() => addFilter(option)}>
                             {getReadableFilterName(option)}
                         </Dropdown.Item>
                     ))}

Plan/react/dashboard/src/components/cards/query/FilterList.js

@@ -29,7 +29,7 @@ const FilterList = ({filters, setFilters, setAsInvalid, setAsValid}) => {
 
     return (
         <ul id={"filters"} className={"filters"}>
-            {filters.map((filter, i) => <li key={JSON.stringify(filter)} className={"filter"}>
+            {filters.map((filter, i) => <li key={'filter-' + i} className={"filter"}>
                 <Filter filter={filter} index={i}
                         setFilterOptions={newOptions => updateFilterOptions(i, newOptions)}
                         removeFilter={() => removeFilter(i)}