() => {

  const obj = useObject({ firstName: 'John' })

  const addLastName = () => obj.merge({ lastName: 'Doe' })

  return (

    <>

      <Button

        onClick={addLastName}

        size="large"

        type="primary"

        style={{ margin: '.5em' }}

      >

        Add 'lastName'

      </Button>

      <List

        style={{ margin: '.5em' }}

        bordered

        dataSource={obj.entries()}

        renderItem={([key, val]) => (

          <List.Item>

            {key}: {val}

          </List.Item>

        )}

      />

    </>

  )

}