How to modify the code such that can call usehook using react and typescript?

A popup is displayed when the add button is clicked and the count is greater or less than 0.

below is the code,

function AddButton () {
    const [isOpen, setIsOpen] = React.useState(false);
    const count = useGetCount();
    useTrigger(isOpen, count);
    const on_add_click = ()  => {
        setIsOpen(true);
    }

    return (
        <button onClick={on_add_click}>add</button>
    );  
}


interface ContextProps {
    trigger: (count: number) => void;
}

const popupContext = React.createContext<ContextProps>({
    trigger: (count: number) => {},
});

const usePopupContext = () => React.useContext(popupContext);

export const popupContextProvider = ({ children }: any) => {
    const [show, setShow] = React.useState(false);
    const limit = 0;

    const dismiss = () => {
        if (show) {
            sessionStorage.setItem(somePopupId, 'dismissed');
            setShow(false);
        }

    };

    const isDismissed = (dialogId: string) =>
        sessionStorage.getItem(dialogId) === 'dismissed';

        const context = {
            trigger: (count: number) => {
            if (!isDismissed(somePopupId) && count <= limit) {
                setShow(true);
            } else if (count > limit) {
                setShow(false);
            }
        },
    };

    return (
        <popupContext.Provider value={context}>
            {children}
            {show && (
                <Popup onHide={dismiss} />
            )}
        </popupContext.Provider>
    );
};


export function useTrigger(enabled: boolean, count: number) {
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        if (enabled) {
            trigger(count);
        }
    }, [enabled, count, trigger]);
}

This works but calls trigger method only when enabled is true.

I want to modify the above code such that when the user clicks the add button, I want this useTrigger to happen. I don’t want to check for enabled and call trigger.

I have tried the following removed checking for enabled.

export function useTrigger(enabled: boolean, count: number) {
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        trigger(count);
    }, [enabled, count, trigger]);
}

this works but the popup is displayed as the count is less than or equal to 0. but I want it to first check if the add button clicked or not.

so soon after the user clicking the add button in on_add_click I want the popup to display.
How can I modify the code above? I am new to using hooks. Could someone help me with this? thanks.

EDIT:strong text
i have tried to do something like below and i get error

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

on_add_click = () => {
    Trigger(count);
}

export function Trigger(count: number) {
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        trigger(count);
    }, [count, trigger]);
}

how can i fix this.

export function useTrigger(count: number) {
    const [clicked, setClicked] = React.useState(false)
    const { trigger } = usePopupContext();
    React.useEffect(() => {
        if(clicked) {
            trigger(count);
        }
 
    }, [count, trigger, clicked]);
    const clickCb = useCallback(() => {setClicked(true)}, [])
    return cb
}

const Component = (props) => {
    const onClick = useTrigger(props.count)
    /* ... */
    return <button onClick={onClick}/>
}