How do I get the search parameters to add to the url on submit, not on change?

The URL format is as follows:

www.url.com/keyword=”_____”

However, the ____ portion of the url starts to fill in even before I submit the form? It works on submit as well but I’ve noticed in my console that every letter is being logged
I infer that is because my input is set to onChange instead of onSubmit but after changing it onSubmit it doesn’t work anymore.

The keyword also sticks around after refreshing the page instead of going back to the original base URL sans parrameters, how can I remedy this?

const SearchBox = ({
  onSubmit: onSubmitCallback,
  searchBoxLabel,
  searchBoxPlaceholder,
  searchBoxButtonText,
  searchBoxHeader,
  searchBoxDescription,
  listingType,
}) => {

  const dispatch = useDispatch();
  const keywords = useSelector((state) => state.searchReducer.Keywords);
  const [searchValue, setSearchValue] = useSearchParams({});

  useEffect(() => {
    const queryKeywords = window.location.search.split('=')[1];
    setSearchValue(queryKeywords)
    onSubmitCallback(queryKeywords)
  }, [])


  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmitCallback(keywords);
    setSearchValue({ searchValue: e.target.value });
    dispatch(setFilters([]));
    // clear all checkboxes
    document
      .querySelectorAll("input[type=checkbox]")
      .forEach((el) => (el.checked = false));
      setSearchValue(searchValue)
  };


  return (
 
    
    <div className={
          listingType === "news"     ? "search-banner search-banner--news"
        : listingType === 'global'   ? "search-banner search-banner--global"
        : listingType === 'resources' ? "search-banner search-banner--resources"
        : "search-banner"
      }
    >

      <div className="search-banner__header">
        <h2>{searchBoxHeader}</h2>
        <p>{searchBoxDescription}</p>
      </div>


      <form className="search-banner__form" onSubmit={handleSubmit}>

        <div className="search-banner__keyword-input-group">
          <label
            htmlFor="resource-search"
            className="search-banner__keyword-label"
          >
            {searchBoxLabel}
          </label>
          <input
            type="text"
            id="resource-search"
            className="search-banner__keyword-input"
            placeholder={searchBoxPlaceholder}
            
            onChange={(evt) => {
              setSearchValue({ keyword: evt.target.value })
              dispatch(setKeywords(evt.currentTarget.value))}
            }
          />
        </div>

        <button className={listingType !== 'resources' ? "btn btn-form" : "btn btn-hollow-white"} style={{backgroundColor: `${listingType === 'news' ? '#3F107C' : ''}`}} type="submit">
          {searchBoxButtonText}
        </button>

      </form>


    </div>

  );
};

export default SearchBox;