How to create Update component to edit Ad?

// AdEdit.js
{ad?.address && ad?.price ? (
  <AdEditForm action={ad.action} type={ad.type} ad={ad} setAd={setAd} />
) : (
  ""
)}

// components/forms/AdEditForm.js
import CurrencyInput from "react-currency-input-field";
import GooglePlacesAutocomplete from "react-google-places-autocomplete";
import { GOOGLE_PLACES_KEY } from "../../config";
import ImageUpload from "./ImageUpload";
import toast from "react-hot-toast";
import axios from "axios";
import { useNavigate } from "react-router-dom";

export default function AdEditForm({ action, type, ad, setAd }) {
  const navigate = useNavigate();

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      if (!ad.photos?.length) {
        toast.error("Photo is required");
        return;
      } else if (!ad.price) {
        toast.error("Price is required");
        return;
      } else if (!ad.description) {
        toast.error("Description is required");
        return;
      } else {
        setAd({ ...ad, loading: true });
        const { data } = await axios.put(`/ad/${ad._id}`, ad);
        console.log("update response => ", data);
        if (data?.error) {
          toast.error(data.error);
          setAd({ ...ad, loading: false });
        } else {
          if (data?.ok) {
            toast.success("Ad updated successfully");
            navigate("/dashboard");
          }
        }
      }
    } catch (err) {
      console.log(err);
      setAd({ ...ad, loading: false });
    }
  };

  return (
    <>
      <form onSubmit={handleSubmit}>
        <ImageUpload ad={ad} setAd={setAd} />

        <div className="mb-3 form-control">
          <GooglePlacesAutocomplete
            apiKey={GOOGLE_PLACES_KEY}
            apiOptions={{ region: "au" }}
            selectProps={{
              defaultInputValue: ad?.address,
              placeholder: "Search for address..",
              onChange: ({ value }) => {
                // console.log("address onchange => ", value.description);
                setAd({ ...ad, address: value.description });
              },
            }}
          />
        </div>

        <CurrencyInput
          placeholder="Enter price"
          defaultValue={ad.price}
          className="form-control mb-3"
          onValueChange={(value) => setAd({ ...ad, price: value })}
        />

        {type === "House" ? (
          <>
            <input
              type="number"
              min="0"
              className="form-control mb-3"
              placeholder="Enter how many bedrooms"
              value={ad.bedrooms}
              onChange={(e) => setAd({ ...ad, bedrooms: e.target.value })}
              required
            />

            <input
              type="number"
              min="0"
              className="form-control mb-3"
              placeholder="Enter how many bathrooms"
              value={ad.bathrooms}
              onChange={(e) => setAd({ ...ad, bathrooms: e.target.value })}
              required
            />

            <input
              type="number"
              min="0"
              className="form-control mb-3"
              placeholder="Enter how many car parks"
              value={ad.carpark}
              onChange={(e) => setAd({ ...ad, carpark: e.target.value })}
            />
          </>
        ) : (
          ""
        )}

        <input
          type="text"
          className="form-control mb-3"
          placeholder="Size of land"
          value={ad.landsize}
          onChange={(e) => setAd({ ...ad, landsize: e.target.value })}
        />

        <input
          type="text"
          className="form-control mb-3"
          placeholder="Enter title"
          value={ad.title}
          onChange={(e) => setAd({ ...ad, title: e.target.value })}
          required
        />

        <textarea
          className="form-control mb-3"
          value={ad.description}
          placeholder="Write description"
          onChange={(e) => setAd({ ...ad, description: e.target.value })}
        />

        <button disabled={ad.loading} className="btn btn-primary">
          {ad.loading ? "Saving..." : "Submit"}
        </button>
      </form>
      <br />
      {/* <pre>{JSON.stringify(ad, null, 4)}</pre> */}
    </>
  );
}

Create backend route and controller to update ad

// routes/ad.js
router.put("/ad/:_id", requireSignin, ad.update);

// controllers/ad.js
export const update = async (req, res) => {
  try {
    // console.log("req.body update => ", req.body);
    const { photos, price, type, address, description } = req.body;

    let ad = await Ad.findById(req.params._id);
    const owner = req.user._id == ad?.postedBy;
    if (!owner) {
      return res.json({ error: "Permission denied" });
    } else {
      //validation
      if (!photos?.length) {
        return res.json({ error: "Photos are required" });
      }
      if (!price) {
        return res.json({ error: "Price is required" });
      }
      if (!type) {
        return res.json({ error: "Is property house or land?" });
      }
      if (!address) {
        return res.json({ error: "Address is required" });
      }
      if (!description) {
        return res.json({ error: "Description is required" });
      }

      const geo = await config.GOOGLE_GEOCODER.geocode(address);
      // console.log("geo => ", [geo?.[0]?.longitude, geo?.[0]?.latitude]);

      await ad.update({
        ...req.body,
        slug: ad.slug,
        location: {
          type: "Point",
          coordinates: [geo?.[0]?.longitude, geo?.[0]?.latitude],
        },
      });
      res.json({ ok: true });
    }
  } catch (err) {
    console.log(err);
  }
};