How do I use a React phone number field (react-phone-number-input) or something similar?

I am trying to use React's

, as follows:

{
  name: 'phone',
  label: 'Phone',
  type: 'ui',
  admin {
    width: '50%',
    components: {
      Field: PhoneInput
    }
  }
}

At the top of my file I have:

import PhoneInput from 'react-phone-number-input'
import 'react-phone-number-input/styles.css'

But it gives this error in the browser console:

My understanding is that I need to pass in my own

handler. But I'm not sure how to do this. Shouldn't this component have its own default

handler? Am I really required to roll my own?

I was hoping this component would be more "plug and play". If this is not the case, can someone please either

provide me a working snippet of

being used within a Payload app? Or perhaps suggest an alternative component that is simpler to plug into Payload?