Пользовательское окно поиска для React Datatables

У меня есть Datatable, настроенный как показанный по умолчанию здесь. Я хочу, чтобы панель поиска для фильтрации данных была отделена от того места, где она находится, и чтобы она находилась где-то совершенно в другом месте. Поэтому я хочу, чтобы мое собственное поле ввода использовалось для поиска данных точно так же, как это делает текущее значение по умолчанию.

Вот мой код и мой текущий прогресс...

state = {
    searchValue: ''
}

const data = [
    ["Gabby", "Data 1", "Pending", "15/01/19", "$100,000"],
    ..........];

let options = {
    .....
    customSearch: (searchQuery, currentRow, columns) => {
        let isFound = false;
        currentRow.forEach(col => {
            if (col.toString().indexOf(this.state.searchValue) >= 0) {
                isFound = true;
            }
        });
    return isFound;
    }
};
.....
<input
    type = "text"
    value = {this.state.searchValue}
    onChange = {(e, value) => this.handleSearchChange(e, value)}
/>
......
<MUIDataTable
    title = {"My Title"}
    data = {data}
    columns = {columns}
    options = {options}
/>

Что это в настоящее время делает, так это то, что вы можете ввести в мое пользовательское поле ввода, но вам нужно открыть поле поиска по умолчанию, и когда вы вводите туда, он использует мой пользовательский текст поиска. Таким образом, я ищу его с помощью пользовательского поиска. Я бы хотел, чтобы он работал так же, как в гифка.

Извините, если это нуб, но я не так давно работаю с React.

Спасибо