Unable to Handle input field in svg

[RameshwarShindeCctech]

Hi,

I'm using react-planner. I want to add input field for inline editing in Svg inside react-svg-pan-zoom. Able to add it. But not able to edit it. It's working outside of react-svg-pan-zoom component but not inside it.
I tried several approaches like using 'foreignObject' n all but no luck.

Can anybody please help, How can I make it work? Is there any issue with input field in react-svg-pan-zoom?

[RameshwarShindeCctech]

Updated the jsfiddle for the reference --

Plz find the input field there I have added simply and its not working (unable to edit n enter the values)