Jest: functional component array list not mapping after adding element

I am trying to list person by clicking onClick function to add empty object so that map can loop over and show div. I see prop onclick function calling works but i map is not looping over it.

a little help would be appreciated.

// functional component

    const listing = ({list=[]}) => (
    <>
        {
        <div id='addPerson'  onClick={() => list.push({})}>Add person</div>}

        {list.map((element, index) => (
        <div key={index} className='listItems'>
            <p>list name</p>            
        </div>
        ))}
    </>
    );

    export default listing;

// test case

it('renders list-items', () => {
 const wrapper = shallow(<listing />);
 wrapper.find('#addPerson').prop('onClick')();
 console.log(wrapper.find('.listItems').length); // showing zero, expected 1
});