How to implement resource picker in App Bridge v4?

How to implement ReSourcePicker in App Bridge V4? Resource Picker

Please see the following docs below.

Getting started with App Bridge:

Examples using Resource Picker:

This will work app-bridge-react 4.2

import { useAppBridge } from "@shopify/app-bridge-react";
import { Button } from "@shopify/polaris";

export default function PageName() {
  const shopify = useAppBridge();

  async function openPicker() {
    const selected = await shopify.resourcePicker({ type: "product" });
    console.log("Selected products:", selected);
  }

  return <Button onClick={openPicker}>Pick Products</Button>;
}