How to mock editing an field in react.js

I am new to unit testing react applications, I am creating a simple todo application and am attempting to mock a test for a user editing a todo.

my test currently looks like this

beforeEach(() => {
    deleteItemMock = jest.fn();
    setUpdateMock = jest.fn();
    itemsMock = [{body: "New Note", id: "12345"}]
    wrapper = shallow(<ListItems 
                      list={itemsMock}
                      deleteItem={deleteItemMock}
                      setUpdate={setUpdateMock}/>)
  });

  it('allows a user to edit a note', () => {
    const input = wrapper.find('input')
    input.simulate('change', {
      target: {value: 'Hi there'}
    })
    expect(deleteItemMock).toHaveBeenCalled()
  })

the current error i am getting is

Expected number of calls: >= 1
Received number of calls:    0

Just in case it helps, the file that I am testing.

function ListItems(props) {
   const list = props.list
    const displayItems = list.map((item, index) => 
    {
      return <div id='text-output' key={index}>
            <p>
              <input 
              type="text" 
              id={index} 
              value={item.body}
              onChange={ (e) => props.setUpdate(e.target.value, item.id)}
              />
              &nbsp;
              <button
              id="delete"
              onClick={ () => props.deleteItem(item.id)}>
                X
              </button>            
            </p>
        </div>
    })
  return(
  <div>
    <h1>This is the list</h1>
    {displayItems}
  </div>
  )
}

The application currently runs fine but I'm not sure where Im going wrong in my tests. Any help would be great!