Resource Picker

[poojafmile]

Hello everyone, 

Am trying to use the product Resource Picker to select a product from my store and display the product name in a textfield.
But I think am doing it the wrong way and missing some parts, can someone please help me fix my code as below:

import React, { useState, useEffect,useCallback } from 'react'

import {TextField, Button } from "@shopify/polaris";

import styles from './auction.module.css';

import { ResourcePicker } from '@shopify/app-bridge-react';

/**

* @export

* @interface LiveAuctionProps

*/

export interface LiveAuctionProps {

}

/**

*

* @param {LiveAuction}Props props

*/

const LiveAuction = (props: LiveAuctionProps) => {

useEffect(() => {

}, [])

const [startpricevalue, setStartPriceValue] = useState('');

const [active, setActive] = useState(false);

const handleResourcePickerClose = useCallback(() => setActive(false), []);

const handleSelection = useCallback(

({ selection }) => {

//onSelect(selection[0]);

handleResourcePickerClose();

},

[handleResourcePickerClose],

);

const [productvalue, setProductValue] = useState('');

const togglePicker = useCallback(() => setActive(true), []);

return (

<div className={styles.container}>

<Button primary onClick={togglePicker}>Shopify Product Picker</Button>

<ResourcePicker

actionVerb={ResourcePicker.ActionVerb.Select}

resourceType="Product"

showVariants={true}

allowMultiple={false}

open={active}

onSelection={handleSelection}

onCancel={handleResourcePickerClose}

/>

<TextField label="Product" type="text" value={productvalue} onChange={newProductValue => setStartPriceValue(newProductValue)}/>

</div>

)

}

export default React.memo(LiveAuction)