Add custom dropdown in React Quill

Question

I am adding React Quill toolbar a new dropdown that will be a list of variables. after adding a custom container

toolbar: {
   container: [
      [{vairables: ["name", "surname"]}],
      ['bold', 'italic', 'underline', 'link', { list: 'bullet' }]
   ]
}

but the dropdown is not visible. Could you help me to fix this problem?

I am importing these:

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';

passing them into React Quill component:

<ReactQuill
   preserveWhitespace
   ref={reactQuillRef}
   modules={modules}
/>