Nest params in URL without loosing already existing ones

function genNewSearchParamString(key, value) {
    const sp = new URLSearchParams(searchParams)
    if (value === null) {
      sp.delete(key)
    } else {
      sp.set(key, value)
    }
    return `?${sp.toString()}`
    }

<div>
    <Link to={genNewSearchParamString("type", "jedi")}>Jedi</Link>
    <Link to={genNewSearchParamString("type", "sith")}>Sith</Link>
    <Link to={genNewSearchParamString("type", null)}>Clear</Link>
</div>


function handleFilterChange(key, value) {
    setSearchParams(prevParams => {
      if (value === null) {
        prevParams.delete(key)
      } else {
        prevParams.set(key, value)
      }
      return prevParams
    })
  }

<div>
    <button onClick={() => handleFilterChange("type", "jedi")}>Jedi</button>
    <button onClick={() => handleFilterChange("type", "sith")}>Sith</button>
    <button onClick={() => handleFilterChange("type", null)}>Clear</button>
</div>