Как я могу Refactor мой код для сценария ниже, который использует состояние?

Question

У меня есть компонент ниже, в котором это рендеринг, который является функциональным компонентом без состояния, и у него есть фильтр обновления метода, где они обновляют состояние

    class App extends Component {
    constructor(props) {
        super(props);

const queryInput = {
            coveUserId,
            pageNumber: 1,
            recordPerPage: initialState[tabName + 'DataColumns'].recordsPerPage,
            startDate,
            endDate
        };
        this.state = {
queryInput
}
}   
updateFilter(params) {
let criteria = {};
if ('All' !== params.filterValue) { 
            //this.state.recentAction = 'SEARCH'
            recentAction = 'SEARCH';
            criteria[params.filterName] = params.filterValue;
        }

        if (
            'All' === params.filterValue ||
            !this.state.dialFilter ||
            JSON.stringify(this.state.dialFilter) !== JSON.stringify(criteria)
        ) {
            console.log('im here');
            this.state.dialFilter = criteria;
            let startDate = this.getFromDate(this.state.DataViewEntityDetails.timeDuration);
            let endDate = new Date().toISOString();
            let pageNumber = 1;
            let recordPerPage = this.state.tableDefaultData.recordsPerPage;
            this.state.queryInput = {
                coveUserId,
                startDate,
                endDate,
                pageNumber,
                recordPerPage,
                ...criteria
            };
            }
            }
render() {
const FilterDial = () => {
            this.logInfo('in FilterDial');
            return (
                <Query query={DATAVIEW_QUERY_REGISTRY['FILTER_DIAL']}>
                    {({ data }) => {
                        this.logInfo('in FilterDial :::: ', data);
                        if (window.dialActionClicked && data && data.filterName && data.filterName.trim() !== '') {                         
                            this.updateFilter(data);
                            window.dialActionClicked = false;
                        }
                        return ' ';
                    }}
                </Query>
            );
        };  
        return (
            <div
            <FilterDial/>
            </div>
}

Теперь я мог видеть: «Не изменяйте состояние напрямую. Используйте setState () response / no-direct-mutation-state 'error в моей консоли ниже кода

this.state.queryInput = {
                coveUserId,
                startDate,
                endDate,
                pageNumber,
                recordPerPage,
                ...criteria
            };

Для того чтобы избавиться от этой ошибки, я изменил ее ниже:

    this.setState
({
            coveUserId,
                startDate,
                endDate,
                pageNumber,
                recordPerPage,
                ...criteria
                });

Теперь я не хочу повторного рендеринга здесь. Как я могу реорганизовать этот код без использования состояния?