components: "Results{List,Grid}.renderElement" should be rendered as a React component

[props.renderElement](https://github.com/inveniosoftware/react-searchkit/blob/6c566ecb7cad1412256254902c583b68608f470f/src/lib/components/ResultsList/ResultsList.js#L38) should render a component in the following fashion:

```javascript
_renderElement(results) {
const _results = results.map((result, index) =>

);
return (

{_results}

);
}
```

This would allow e.g. for custom components with their own internal state to be passed.

The concrete use-case is that we have a search page where each list item has `Accept/Reject` buttons, that when clicked make an AJAX HTTP request and on a successful response they show a result message and disable the buttons:

```javascript
const ResultsItemTemplate = ({ record, index }) => {
const [result, setResult] = useState({ message: null, status: null });

function handleRequest(action) {
axios
.post(`/communities/${record.id}/${action}`)
.then((response) => {
setResult({ message: response.data.message, status: action });
})
.catch((error) => {
setResult({ message: error.data.message, status: null });
});
}

return (


{record.title}

handleRequest("accept")}
>
Accept

handleRequest("reject")}
>
Reject

{result.status ? {result.message} : null}

);
};
```

Start in src/lib/components/ResultsList/ResultsList.js at props.renderElement, then inspect the corresponding ResultsGrid implementation mentioned in the issue. Confirm how each result item is rendered and ensure a custom stateful React component can be passed for list and grid results while preserving per-item state.

Written by the indexing model from the issue text.