why does react js renders two times when setting a state

The problem is not in React rendering, but in handling label clicks. Your handling function is first triggered from label or its children svg or polygon (causing render) and then from input (another render). It can be logged and debugged like this with event.target:

function YourComponent() {
  const [searchClick, setSearchClick] = useState("hidden");

  const onClickFnc = (event) => {
    console.log("onClick called", event.target);
    setSearchClick((prevState) => (prevState === "hidden" ? "flex" : "hidden"));
  };

  console.log("rendering component");

  return (
    <div>
      <label
        onClick={onClickFnc}
        className="btn-xs btn-ghost rounded-full w-fit h-fit swap swap-rotate"
      >
        <input type="checkbox" />
        <svg
          className="swap-on fill-current"
          xmlns="http://www.w3.org/2000/svg"
          width="32"
          height="32"
          viewBox="0 0 512 512"
        >
          <polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
        </svg>
      </label>
      <div>Current state: {searchClick}</div>
    </div>
  );
}

It can be solved by adding handler on input and some event.stopPropagation(), nice example here: https://stackoverflow.com/a/38958110/5940854