1. The card component navigates to a dynamic page via ${name}.
2. The page renders <FormDetailsFromUsers /> which is a form
3. I want the first input in the form to have a value of ${name} i.e. if the URL path is item1, the input value should be item 1
How?

import { PlanDetails } from "@/app/typesAndInterfaces/planDetails";
import Link from "next/link";
export const Card = ({
  name
}: PlanDetails): JSX.Element => {
  return (
      <div className="card-body">
        <Link href={`/form/${name}`} className="btn btn-primary w-100">
          Card link
        </Link>
      </div>
  );
};

import { FormDetailsFromUsers } from "@/app/components/Form/FormDetailsFromUsers";

export default function Page({ name }: { name: string }): JSX.Element {
  console.log(name);
  return (
    <main>
      <FormDetailsFromUsers name={name} />
    </main>
  );
}

export const FormDetailsFromUsers = ({
  name,
}: {
  name: string;
}): JSX.Element => {
  console.log(name);
  return (
    <form>
      <div className="mb-3">
        <label htmlFor="disabledTextInput" className="form-label">
          Plan name
        </label>
        <input
          type="text"
          id="disabledTextInput"
          className="form-control"
          value={name}
        />
      </div>
      ...
      <button type="submit">
        Submit
      </button>
    </form>
  );
};