toolbar-plugin | toolbar plugin for prosemirror | Plugin library

Custom Inline Toolbar, as prescribed in their documentation is not working as expected. It keeps showing the default Inline Toolbar, even though custom buttons are added.

My code goes below.

I am working on a homepage that consists of eight different components representing various aspects of the page content. I want to have three of them be editable using a custom built InlineEditor component that uses Draft.js. When I tried to do this initially, the editing toolbars for the second and third component would only work on the first component. So this is a Draft.js issue. I was able to get everything to work by creating three separate InlineEditor components and then using each one individually when necessary, but that seems redundant.

I'm thinking there has to be a better way to do this using HOCs or render props but I'm struggling to set that up properly. Any ideas on what might be a better way to go about this?

Here's the initial InlineEditor component:

I have a react 16 app and I am just trying to upgrade to apollo2. Near enough the same code works with Apollo1.

Here is my index.js file