react-simple-keyboard using useEffect intial value of the state not able to set

Question

Beginner here. Trying to get react-simple-keyboard working with React.

I am displaying the keyboard onfocus of the input just like this example https://hodgef.com/simple-keyboard/editor/?d=hodgef/react-simple-keyboard-demos/tree/uc-showhide

but if I have some initial value for state called firstName and user should be able to update this value. I am tryinh to set this value by keyboard.current.setInput using useEffect. I am getting this error Uncaught TypeError: Cannot read property 'setInput' of undefined.

const {firstName} = input;
useEffect(() => {
  keyboard.current.setInput(firstName);
}, [firstName]);

thanks in advance!!