What is the difference between useState Hook and self introduced function?

Question

Problem

This problem is a challenge in the coding challenge posted by quera. The challenge is to create a new hook to filter the search items based on multiple inputs and update the URL to share the filter to the web-view and the user. I made change to the only file required to get changed named useFilter in the Hooks folder. below the function useFilter, the beneath code does not work as a solution to this problem:

const filterState = {};
const setState = (s) => {
    for(var i in s){
      filterState[i]=s[i];
    }
};

and the input can't update with keypress. but this does:

import { useState } from "react";
const [filterState, setState] = useState

with a suffix code added to both codes(changed the main code to this):

function onChange(e, name, type) {
    let searchParams = new URLSearchParams(window.location.search);

    searchParams.set(name, e.target.value);

    if (window.history.replaceState) {
        const url = window.location.protocol 
                    + "//" + window.location.host 
                    + window.location.pathname 
                    + "?" 
                    + searchParams.toString();

        window.history.replaceState({
            path: url
        }, "", url)
    }
    
    setState({...filterState,[name]:e.target.value});
    e.target.value=filterState[name];
  }

is there a way not to use the useState?

I have made use of custom function as a setState but not the useState one but I need to change the value of the formInput/TextInput/Index.js:

from {...value="" ...} to {... value ...}

I can type with this change but can't see any filter anymore!