Recieving a fail on a test for a Pop Up

I have a popup where when i click on the button, Nav would popup and be true, however i am not passing that test. I am passing the test that nav-closed returns a false value when clicked.

I am new to testing, any guidance would be great help. Thanks in advance.

    describe('when clicked', () => {
        test('should be triggered', () => {
            const popUpHandler = jest.fn();
            const {queryByTestId} = render(<Header/>);

            fireEvent.click(queryByTestId('nav-closed'));

            expect(queryByTestId('nav-closed')).toBeFalsy(); //pass

            render(<Nav popUpHandler={popUpHandler}/>);
            expect(popUpHandler).toHaveBeenCalled();        //Fail
            expect(queryByTestId('nav-open')).toBeTruthy(); //Fail
        })
        
    })

import React, {useState} from 'react'
import Nav from './Nav'

function Header() {
    const [isPopUp, setPopUp] = useState(false);

    const popUpHandler = () => {
        setPopUp(!isPopUp);
    };

    return (
        <div className='header'>
            {isPopUp === false ? 
                <button className='header__navClosed' data-testid='nav-closed' onClick={popUpHandler}></button> 
                : 
                <Nav data-testid='nav-open' popUpHandler={popUpHandler}/>
            }
        </div>
    );
};

export default Header;