React Admin - Button in the filter component displays twice?

Question

I have implemented a clear button in the filter component. Clear button is working as expected but the button displays twice in the Page.

This is the code

import * as React from 'react';
import { List, Datagrid, TextField, ReferenceField, NumberField, DateField } from 'react-admin';
import { Filter, ReferenceInput, SelectInput, TextInput, DateInput } from 'react-admin';
import Button from '@material-ui/core/Button';

const FilterComponent = props => (
    <div>
        <Filter {...props} >
            <TextInput
                label="Search"
                source="name"
                alwaysOn
            />

            <DateInput source="start_date" alwaysOn />
            <DateInput source="end_date" alwaysOn />
           
           
        </Filter>
        <Button id="clearButton" variant="outlined" onClick={() => props.setFilters({})}>Clear fields</Button>
    </div>
);

export const ProjectList = props => (
    <List {...props} filters={<FilterComponent />}>
        <Datagrid rowClick="edit">
            // Here is the fields
        </Datagrid>
    </List>
);

But the problem is button displays twice in the filter component

Please share your answers. Thanks in advance

Answer 1

You shall have the Button hide when props.context === 'button'