using react and reft, what is the difference between these 2 approches?

Question

I have this code where i call the function inside a custom hook to reset the state

const companySelectPaginationRef = useRef();

<PopUp
    close={() => {
        onClose();
        companySelectPaginationRef.current.resetCompaniesSearchQuery();
    }}
>
//some code
</PopUp>

// another component
useImperativeHandle(ref, () => ({
    resetCompaniesSearchQuery() {
        setCompaniesSearchQuery(null);
    },
}));

every this is working fine like this, but when I add the function I am calling inside onClose()

const onClose = () => {
    //some state changes
    companySelectPaginationRef.current.resetCompaniesSearchQuery();
};

I get this error

TypeError: Cannot read properties of null (reading 'resetCompaniesSearchQuery')

I can't understand what is the difference between the two approaches