feat: update coordinate button to use the new result value

BREAKING CHANGE: The input of the render function is no longer grouped by featureType
 but returns an object for each feature that contains the feature, the layer and the feature type.

If you need the grouping, you can do the following

```
import { groupBy, mapValues } from 'lodash';

<CoordinateInfo
  resultRenderer={({ features }) => {
    const grouped = groupBy(features, 'featureType');
    const groupedAndMapped = mapValues(grouped, results => results.map(r => r.feature));
    // ...
  }}
/>
```

package.json

@@ -73,7 +73,7 @@
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@terrestris/base-util": "^2.0.0",
     "@terrestris/ol-util": ">=18",
-    "@terrestris/react-util": "^7.0.0",
+    "@terrestris/react-util": "^8.0.0",
     "@types/lodash": "^4.17.4",
     "ag-grid-community": "^31.3.2",
     "ag-grid-react": "^31.3.2",

src/CoordinateInfo/CoordinateInfo.example.md

@@ -109,7 +109,7 @@ const CoordinateInfoExample = () => {
           };
 
           return (
-            Object.keys(features).length === 1 && features[Object.keys(features)[0]].length === 1 ?
+            features.length > 0 ?
               <div>
                 <div
                   style={{
@@ -155,8 +155,8 @@ const CoordinateInfoExample = () => {
                   >
                     <Statistic
                       title="State"
-                      value={getValue(features[Object.keys(features)[0]][0], 'STATE_NAME')
-                        || getValue(features[Object.keys(features)[0]][0], 'name')}
+                      value={getValue(features[0].feature, 'STATE_NAME')
+                        || getValue(features[0].feature, 'name')}
                     />
                   </Spin>
                   <Tooltip
@@ -166,7 +166,7 @@ const CoordinateInfoExample = () => {
                       style={{ marginTop: 16 }}
                       type="primary"
                       onClick={() => {
-                        copy(features[Object.keys(features)[0]][0].get('STATE_NAME'));
+                        copy(features[0].feature.get('STATE_NAME'));
                       }}
                       icon={
                         <FontAwesomeIcon
@@ -177,7 +177,9 @@ const CoordinateInfoExample = () => {
                   </Tooltip>
                 </div>
               </div> :
-              <span>Click on a state to get details about the clicked coordinate.</span>
+              <span>
+                Click on a state to get details about the clicked coordinate.
+              </span>
           );
         }}
       />