default state is rendering when the page reloding

[hrutik7]

here is atom

"use client";
import { atom } from "recoil";

export const searchState = atom({
  key: "searchState", // unique ID (with respect to other atoms/selectors)
  default: {
    property_type_id: 1,
    property_type: "Apartment",
    rent: true,
    city:"Amara",
    city_id: 2,
    price_min: 0,
    price_max: 100000,
    bedrooms: 1,
    floor: 1,
    kitchen: 1,
    features: [
      "Parking",
      "Security",
      "Hot Water",
      "Elevator",
      "Swimming Pool"
    ],
  }, // default value (aka initial value)
});

const [search, setSearch] = useRecoilState(searchState);

I am updating state by onclick event

onClick={() => {
            setSearch({
              rent: rent,
              property_type: selectedPropertyType,
              property_type_id: propertyTypeId,
              city: city,
              city_id: cityid,
              price_min: minPrice,
              price_max: maxPrice,
              bedrooms: rooms,
              baths: baths,
              features: updateFeat,
            });
          }}
          ```

but when the page is reload it is rendering as a default state