Why my input is not reseting? {react-router-dom}

I’m currently working on getting my reset button to effectively reset the search functionality. While the button itself is working as intended, I’m encountering an issue where the text input field doesn’t reset along with it. Strangely, both “query,” “searchText,” and “inputValue” seem to retain their values, and I’m struggling to find a solution to reset them as well. Any assistance on resolving this would be greatly appreciated. Thanks!

//This is my reset function
const onResetSearch = () => {
    event.preventDefault();
   setBusco(false);
   setSearchParams({});
   console.log(query, searchText, inputValue);
   onResetForm();
   navigate("/search")}

const [searchParams, setSearchParams] = useSearchParams(); //esto se hace asi nomas
const query = useMemo(() => searchParams.get("q"), [searchParams.get("q")]); 
const heroes = useMemo(() => (query ? getHeroesByName(query) : []), [query]); 
const { searchText, onInputChange, onResetForm } = useForm({searchText: query || ""});

const inputValue = searchText.trim();
const onSearchSubmit = (event) => {
event.preventDefault();
if (inputValue.length < 1 || !inputValue) return;
setSearchParams({ q: inputValue });};

<button onClick={onResetSearch}}
className="btn btn-outline-danger mt-2">Reset</button>

When I search something (https://i.stack.imgur.com/JQCAr.png)
When I press the reset button (https://i.stack.imgur.com/uCxpt.jpg)
You can see that superman is still there in the input