F7 React, Picker inputEl undefined

i initialized my Picker like that:

  const createPicker = window.f7.picker.create({
    inputEl: "#demo-picker-device",
    cols: [
      {
        textAlign: "center",
        values: [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]
      }
    ],
    on: {
      change: e => {
        console.log(e.value);
      }
    }
  });

and i’m calling it like that if i click my input element

const openPicker = () => {
  createPicker.open()
}

return(
  <inputElement id={'demo-picker-device'} clickHandler={openPicker} />
)

My Input Element has the id “#demo-picker-device” but there is no value update and if i console.log createPicker.inputEl it says undefined.

What i’m doing wrong?

Make sure picker created when component and input mounted

yes, they are in the same component and i checked by using on init event inside picker.

do i call the picker correctly with the onClick event? could you maybe give a short example on how to init and call the picker? (documentation just showst how to create)