react-router-dom question: After I setSearchParamaters, why does searchParamaters.get fail to retreive current value?

import { useSearchParams } from "react-router-dom";

//in the component:
const [searchParams, setSearchParams] = useSearchParams()

//in the render section:
<button
        onClick={() => {
          setSearchParams({
            filter: "alligators",
          });
          console.log(searchParams.get("filter"));
        }}
      >
        setSearchParams and view the value
      </button>

After I click the button, I do not see 'alligators' logged! Instead, what gets logged is the previous filter value. In order to actually see 'alligators', I have to press the button twice. Why doesn't it work the first time I click it? Thanks!