How to use single Ad create form for selling or renting house and lands?

// components/forms/AdForm.js
export default function AdForm({ action, type }) {
  return (
    <>
      <p>This is ad create form</p>
      {action} / {type}
    </>
  );
}

Now create pages to sell house, sell land, rent house and rent land.

// pages/user/ad/SellHouse.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function SellHouse() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Sell House</h1>
      <div className="container mt-2">
        <AdForm action="Sell" type="House" />
      </div>
    </div>
  );
}


// pages/user/ad/SellLand.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function SellLand() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Sell Land</h1>
      <div className="container mt-2">
        <AdForm action="Sell" type="Land" />
      </div>
    </div>
  );
}


// pages/user/ad/RentHouse.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function RentHouse() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Rent House</h1>
      <div className="container mt-2">
        <AdForm action="Rent" type="House" />
      </div>
    </div>
  );
}


// pages/user/ad/RentLand.js
import Sidebar from "../../../components/nav/Sidebar";
import AdForm from "../../../components/forms/AdForm";

export default function RentLand() {
  return (
    <div className="contaienr-fluid">
      <Sidebar />
      <h1 className="display-1 bg-primary text-light p-5">Rent Land</h1>
      <div className="container mt-2">
        <AdForm action="Rent" type="Land" />
      </div>
    </div>
  );
}

Import them all in App.js

<Route path="/" element={<PrivateRoute />}>
  <Route path="dashboard" element={<Dashboard />} />
  <Route path="ad/create" element={<AdCreate />} />
  <Route path="ad/create/sell/House" element={<SellHouse />} />
  <Route path="ad/create/sell/Land" element={<SellLand />} />
  <Route path="ad/create/rent/House" element={<RentHouse />} />
  <Route path="ad/create/rent/Land" element={<RentLand />} />
</Route>