ReactJS Boostrap Condtional Render Tooltip On Disabled Button

I have a button which is either disabled or enabled depending on some logic. This is done using useEffect like so -

useEffect(() => {
        if (selectedItems.length > 0) {
            selectedItems.forEach(function (item) {
                if (item.status === "FOR SALE") {
                    setDisabledBuyItem(false)
                } else {
                    setDisabledBuyItem(true)
                }
            })
        } else {
            setDisabledBuyItem(true)
        }
    }, [selectedItems]) 

Basically I have a table with rows of items, if the item selected has a status of 'FOR SALE', then the button that allows the person to buy it will be enabled. When the button is disabled, I have managed to set a tooltip on it which will show when the user hovers over it telling them that only items that are for sale can be bought etc. This works fine like so -

    <OverlayTrigger overlay={<Tooltip id="tooltip-disabled">Only items that have 'FOR SALE' can be purchased</Tooltip>}>
                    <span className="d-inline-block">

                        <Button variant="primary" disabled={disabledBuyItem}
                            onClick={() => modalContext.modalHandler(buyItemLabel, <BuyItems selectedItems={selectedItems} buyItemsHandler={buyItemsHandler} />)}>{buyItemLabel}</Button>{' '}

                    </span>
                </OverlayTrigger>

When a row on the table is selected that says 'FOR SALE' and the button becomes enabled, I do not want the tooltip to show anymore. I am stuck as to how to do this. I was thinking of putting it all in a conditional wrapper however I don't know how I would apply this to the tooltip..