Support Undestructued Props / Typescript Props

[gaurangrshah]

Is your feature request related to a problem? Please describe.
We as a guideline do not de-structure our props inline in the function component statement. If I am not mistaken this extension seems to expect that props are de-structured inline. I believe this is because we use typescript to define our props and their types as shown in the example below.

Describe the solution you'd like
Here's an example of a component where we don't de-structure the props directly.

type BannerContentProps = React.PropsWithChildren<{
  heading?: string;
  description?: string;
  href?: string;
  label?: string;
}>;

function BannerContent(props: BannerContentProps) {
  return (
    <div className="flex flex-col justify-center gap-y-2 mr-2 flex-1 text-sm">
      <strong>{props.heading ?? "Transparency"}</strong>
      <p className="">
        {props.description ?? "We use cookies to improve your experience."} By
        using our site, you agree to our{" "}
        <Link
          href={props.href ?? "/privacy"}
          className="text-primary-500 dark:text-primary-400 hover:underline text-gray-500"
        >
          {props.label ?? "privacy policy"}
        </Link>
        .
      </p>
    </div>
  );
}

[hb1998]

let me have a look