implement select2 tagbox in reactjs from surveyjs

Question

hi im using the surveyjs to create my react survey and there is a question type that i need which is custom widget:Select2 tagbox questiontype but nothing i try works. has anyone been able to solve this even when i change the "type" to "celltype" that does not work either and i cant figure out what could be the problem. if anyone is able to assist it would be much appreciated.

here is my code below.

import React,{Component} from 'react';
import './App.css';
import "survey-react/survey.css"
import * as Survey from "survey-react"
import "surveyjs-widgets"

class App extends Component {
    constructor (props){
        super(props)
        this.state = {

    }

        this.onCompleteComponent = this.onCompleteComponent.bind(this)
    }
    onCompleteComponent = () =>{
        this.setState({
            isCompleted: true
         })
    }



render(){
var json = {
  clearInvisibleValues: "onHidden",
  questions: [
      { //question 1
          type: "tagbox",
          name: "roles",
          title: "Roles with non-portable work",
          choices: [
              "Role1",
              "Role2",
              "Role3"
          ],
          colCount: 0
      }
   };
   ]
  };

var surveyRender= !this.state.isCompleted ? (
    <Survey.Survey
    json={json}
    showCompletedPage={false}
    onComplete={this.onCompleteComponent}
    />
 ) : null

var onSurveyCompletion = this.state.isCompleted?(
    <div>Thank you for your participation in this survey!</div>
 ) : null;

 return (
    <div className="App">
      <div>
          {surveyRender}
          {onSurveyCompletion}
      </div>
    </div>
     );
   }
 }
export default App;