How to handle map product not found in react dropdown

Question

I would like to handle unmatch result in the code highlighted in bold below. Currently, it will use GraphAPI to get the information from AzureAD. if product match then it set value. Currently, if the product not exist inside const Sale, it thrown an error. Is there any ways I can set default value to empty or null if the value product not match.

export const PO ={
    STYLE: "Wired",
    STYLE2: "Wireless"
}

export const Sale = [
   {
        product: "headset",
        pu: PO.STYLE,
        brand: "jbl"
   },
   {
        product: "headset",
        pu: PO.STYLE,
        brand: "sony"
   },
   {
        product: "headset",
        pu: PO.STYLE2,
        brand: "beats"
   }
];



const { control, watch, setValue } = useForm<IFormValues>({

    defaultValues: {
       ...user,
       product:Sale.find((d) => d.product === user.sale).product, //Currently it throwing exception if it not match.
    },

});





//Get Form Values
const formValues = watch()
const {product, brand } = Sale.find((d) => d.product === formValues.product);

const productOptions = Object.values(PO).map((product) => ({key: product, text: product}));

return (

    <Label>Product</Label>
    <Controller as="input" name="product" type="hidden" control= {control} />
    <Dropdown
        options = {productOptions}
        selectedKey = {formValues.product}
        onchange = {(_, option: IDropdownOption) => {
            setValue("product", option.key);
        })
    />
    
}

Answer 1

export const PO ={
    STYLE: "Wired",
    STYLE2: "Wireless",
    DEFAULT: null
}

export const Sale = [
   {
        product: "headset",
        pu: PO.STYLE,
        brand: "jbl"
   },
   {
        product: "headset",
        pu: PO.STYLE,
        brand: "sony"
   },
   {
        product: "headset",
        pu: PO.STYLE2,
        brand: "beats"
   },
   
   {
        product: null,
        pu: PO.DEFAULT,
        brand: null
   },

];


export interface ProductInfo{
    product: Product;
}
const { control, watch, setValue } = useForm<IFormValues>({

    defaultValues: {
       ...user,
       product:GetProduct(product)
    },

});

//GetProduct

function GetProduct(product: Product)
{
     let productInfo = Sale.find((d) => d.product === user.sale);
     if(!productInfo)
     {
        return PO.DEFAULT;
     }
     return productInfo.po;
}




//Get Form Values
const formValues = watch()
const {product, brand } = Sale.find((d) => d.product === formValues.product);

const productOptions = Object.values(PO).map((product) => ({key: product, text: product}));

return (

    <Label>Product</Label>
    <Controller as="input" name="product" type="hidden" control= {control} />
    <Dropdown
        options = {productOptions}
        selectedKey = {formValues.product}
        onchange = {(_, option: IDropdownOption) => {
            setValue("product", option.key);
        })
    />
    
}