Como fazer um filtro voltar ao estado inicial

essa é a questão que estou fazendo e esse é meu código

import React, { useEffect, useContext, useState } from 'react';
import tableContext from '../context/tableContext';

const INITIAL_COLUMN_OPTIONS = [
  'population', 'orbital_period', 'diameter', 'rotation_period', 'surface_water'];
function Filters() {
  const { inputName,
    setInputName,
    columnFilter,
    setColumnFilter,
    comparisonFilter,
    setComparisonFilter,
    inputNumber,
    setInputNumber,
    filterByNumericValues,
    setFilterByNumericValues } = useContext(tableContext);
  const [arrayOptions, setArrayOptions] = useState(INITIAL_COLUMN_OPTIONS);
  const clickSubmitButton = (() => {
    setFilterByNumericValues(
      [...filterByNumericValues,
        { inputName, columnFilter, comparisonFilter, inputNumber }],
    );
    setArrayOptions([...arrayOptions.filter((selected) => selected !== columnFilter)]); // aqui remove
  });
  useEffect(() => {
    setColumnFilter(arrayOptions[0]);
  }, [arrayOptions]);
  return (
    <div>
      { /* criando os filtros a partir daqui */ }
      <h3>Filtros</h3>
      <input
        data-testid="name-filter"
        name="filtra nomes"
        type="text"
        value={ inputName }
        onChange={ (e) => setInputName(e.target.value) }
      />
      <p />
      <fieldset>
        <legend>Filtros de Conteúdo</legend>
        <label htmlFor="column-filter">
          {' '}
          Coluna
          {' '}
          <select
            data-testid="column-filter"
            name="coluna de filtros"
            value={ columnFilter }
            onChange={ (e) => setColumnFilter(e.target.value) }
          >
            {arrayOptions.map((op, index) => (
              <option key={ index } value={ op }>{ op }</option>)) }
          </select>
        </label>
        <label htmlFor="comparison-filter">
          {' '}
          Operador
          {' '}
          <select
            data-testid="comparison-filter"
            name="comparison-filter"
            value={ comparisonFilter }
            onChange={ (e) => setComparisonFilter(e.target.value) }
          >
            <option value="maior que">maior que</option>
            <option value="menor que">menor que</option>
            <option value="igual a">igual a</option>
          </select>
          <input
            data-testid="value-filter"
            name="filtro de valores"
            type="number"
            value={ inputNumber }
            onChange={ (e) => setInputNumber(e.target.value) }
          />
        </label>
        <button
          data-testid="button-filter"
          name="botao filtrar"
          type="submit"
          onClick={ clickSubmitButton }
        >
          Filtrar
        </button>
        <button
          data-testid="filter"
          name="formatar"
          type="subit"
          onChange={}
        >
          Formatar Filtro
        </button>
      </fieldset>
    </div>
  );
}
export default Filters;

qual a dúvida? onde vc quer resetar o filtro? ao clicar em alguma coisa? tente ser mais objetiva na pergunta por favor