React-typeahead: Disable remove token

Question

I have a user Profile page (email, display name etc.); when it loads all the inputs are disabled, It seems the Typeahead's input can be disabled however it also provides the tokens from which I am saving, that it seems cannot be disabled.

I thought of using useRef() to hook into the Token component and just disable the props.onTokenRemove but that's a no no!

How can I solve this problem?

This is my Tokenizer code:

  <Tokenizer
    customClasses={{
      input: input,
      results: results,
      token: token
    }}
    defaultSelected={interestedActivities}
    disabled={!isProfileInEditMode}
    options={search}
    onTokenAdd={(token) => setInterestedActivities(prev => [...prev, token])}
    placeholder="e.g. Running, skating"
  />

I also had the idea of stuffing some logic in a useEffect; essentially using a DOM method to find the tokens and add a eventListener to have the anchor return false when clicked.

But it didn't work.

  useEffect(() => {
    var arr = []
    document.querySelectorAll('.typeahead-token > a').forEach(element => {
      arr.push(element)
    })

    for (let i = 0; i < arr.length; i++) {
      console.log('arr[i]', arr[i])
      arr[i].addEventListener('click', function (e) {
        console.log('e', e)
        return false
      }, false)
    }

  }, [isProfileInEditMode])