How to use the sweetalert2/src/sweetalert2.mixin function in sweetalert2

static playPause = () => {
    const videoElement = document.getElementById('video');
    if (videoElement.paused) {
      videoElement.play();
    } else {
      videoElement.pause();
    }
  };

  static toggleVideoControls = () => {
    const videoElement = document.getElementById('video');
    videoElement.controls = !videoElement.controls;
  };

  toastPopup = Swal.mixin({
    toast: true,
    position: 'top-start',
    showConfirmButton: false,
    timer: 3000
  });

  constructor(props) {
    super(props);
    // here we do a manual conditional proxy because React won't do it for us
    let socket;
    if (window.location.origin === 'http://localhost:3000') {
      console.log('manually proxying socket');
      socket = io('http://localhost:3001');
    } else {
      socket = io();
    }

createCollection = () => {
    Swal.mixin({
      confirmButtonText: 'Next',
      showCancelButton: true,
      progressSteps: ['1', '2']
    })
      .queue([
        {
          title: 'Collection Name',
          input: 'text'
        },
        {
          title: 'Description',
          input: 'textarea'
        }
      ])
      .then(async result => {
        if (result.value) {

createAnnotationCollection = async () => {
    Swal.mixin({
      confirmButtonText: 'Next',
      showCancelButton: true,
      progressSteps: ['1', '2']
    })
      .queue([
        {
          title: 'Collection Name',
          input: 'text'
        },
        {
          title: 'Description',
          input: 'textarea'
        }
      ])
      .then(async result => {
        if (result.value) {

},
  grid: {
    margin: theme.spacing(6)
  },
  collectionButton: {
    marginRight: theme.spacing(),
    marginBottom: theme.spacing(2)
  }
});

function getSteps() {
  return ['Users', 'Videos', 'Concepts', 'Insert'];
}

class AnnotationCollection extends Component {
  toastPopup = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
  });

  constructor(props) {
    super(props);
    this.state = {
      selectedUsers: [],
      selectedCollection: '',
      selectedCollectionCounts: [],
      selectedVideos: [],
      selectedConcepts: [],
      annotationCount: '',
      trackingCount: '',

height: '57px'
  },
  helpIcon: {
    position: 'absolute',
    top: '12px',
    right: '40px'
  },
  doneIcon: {
    position: 'absolute',
    top: '12px',
    right: '175px'
  }
});

class Annotations extends Component {
  toastPopup = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
  });

  constructor(props) {
    super(props);
    this.state = {
      annotations: [],
      isLoaded: false,
      error: null
    };
  }

  componentDidMount() {

<div style="{{">
      
        
        
        
        
      
    </div>
  );
}

class VerifyAnnotations extends Component {
  toastPopup = Swal.mixin({
    toast: true,
    position: 'top-end',
    showConfirmButton: false,
    timer: 3000
  });

  constructor(props) {
    super(props);
    const { annotation, displayLoading } = this.props;
    const videoDialogOpen = JSON.parse(localStorage.getItem('videoDialogOpen'));

    this.state = {
      disableVerify: false,
      concept: null,
      comment: annotation.comment,
      unsure: annotation.unsure,

createCollection = () => {
    Swal.mixin({
      confirmButtonText: 'Next',
      showCancelButton: true,
      progressSteps: ['1', '2']
    })
      .queue([
        {
          title: 'Collection Name',
          input: 'text'
        },
        {
          title: 'Description',
          input: 'textarea'
        }
      ])
      .then(async result => {
        if (result.value) {