React form where form state is saved in querystring using react-hook-form

AdvancedForm.jsx

"use client";
import { useForm } from "react-hook-form";
import { useEffect } from "react";

const AdvancedForm = () => {
  const { register, handleSubmit, setValue, watch } = useForm();
  const watchedValues = watch();

  // Function to update the query string
  const updateQueryString = () => {
    const queryString = new URLSearchParams(watchedValues).toString();
    window.history.pushState(null, "", `?${queryString}`);
  };

  const onSubmit = (data) => {
    updateQueryString();
    console.log(data);
  };

  // Set form values from query string on component mount
  useEffect(() => {
    const queryValues = Object.fromEntries(
      new URLSearchParams(window.location.search.split(/\?/)[1])
    );
    for (const [key, value] of Object.entries(queryValues)) {
      if (value.toLowerCase() === "false") {
        setValue(key, false);
        continue;
      }
      if (value.toLowerCase() === "true") {
        setValue(key, true);
        continue;
      }

      setValue(key, value);
    }
  }, []);

  // Update query string on form value change
  useEffect(() => {
    updateQueryString();
  }, [watchedValues]);

  return (
    <form onSubmit={handleSubmit(onSubmit)} method="get" action="/">
      <input {...register("input1")} type="text" />
      <select {...register("select1")}>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
      </select>
      <input {...register("checkbox1")} type="checkbox" />
      <input {...register("range1")} type="range" />

      <button type="submit">Submit</button>
    </form>
  );
};

export default AdvancedForm;