How to use the react-toastify.toast.configure function in react-toastify

import 'bootstrap/dist/css/bootstrap.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { toast } from 'react-toastify';

toast.configure({
    autoClose: 4000,
    draggable: false,
    closeButton: false,
    draggablePercent: 100,
    progressClassName: 'ourbar',
    position: 'top-left',
    style: {top: '90px'}
  });

ReactDOM.render(, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import {Route, Switch} from 'react-router-dom';
import {WebRoute} from "./shared/constants/routes";
import {AuthRoute} from './shared/components/AuthRoute';
import * as Routes from './routes';
import {NotFound} from "./shared/components/NotFound";
import Layout from "./layout/Layout";

import {initializeIcons} from 'office-ui-fabric-react/lib/Icons';
import {registerYupMethods} from "./routes/Offers/formUtils/registerYupMethods";
import {toast} from "react-toastify";
import 'react-toastify/dist/ReactToastify.css';

initializeIcons(/* optional base url */);
registerYupMethods();

toast.configure({autoClose: 2000});

const App: React.FC = () => {

  const BaseRoutes = () => {

    return (

import App from 'next/app';
import React from 'react';
import { toast } from 'react-toastify';
import { Provider } from 'react-redux';
import withReduxStore from '../redux/_lib/with-redux-store';
import './empty.css';

import 'react-toastify/dist/ReactToastify.css';

toast.configure(
  { position: toast.POSITION.BOTTOM_RIGHT },
);

class MyApp extends App {
  // Only uncomment this method if you have blocking data requirements for
  // every single page in your application. This disables the ability to
  // perform automatic static optimization, causing every page in your app to
  // be server-side rendered.
  //
  // static async getInitialProps(appContext) {
  //   // calls page's `getInitialProps` and fills `appProps.pageProps`
  //   const appProps = await App.getInitialProps(appContext);
  //
  //   return { ...appProps }
  // }

import CarouselPage from './components/pages/components/CarouselPage';
import ChartsPage from './components/pages/components/ChartsPage';
import AvatarPage from './components/pages/components/AvatarPage';
import CollapsePage from './components/pages/components/CollapsePage';
import DropdownsPage from './components/pages/components/DropdownsPage';
import TablePage from './components/pages/components/TablePage';
import ProgressBarPage from './components/pages/components/ProgressBarPage';
import ModalPage from './components/pages/components/ModalPage';
/* pages components */

/* documentation */
import Documentation from './components/pages/documentation';
/* documentation */

// Call it once in your app. At the root of your app is the best place
toast.configure();

const App = (props) => {
    /* use this element to create route that only logged in user can access */
    const PrivateRoute = ({ component: Component, ...rest }) => (
         
            (
                //check if authenticated or not
                props.isAuthenticated === true
                ? 
                    // authenticated render using admin layout
                    (
                        
                            
                        
                    )
                :

import DialogTitle from '@material-ui/core/DialogTitle';
import DialogActions from '@material-ui/core/DialogActions';
import Tooltip from '@material-ui/core/Tooltip';
import CloseIcon from '@material-ui/icons/Close';
import Grid from '@material-ui/core/Grid';
import WorksheetDialogs from '../WorksheetDialogs';
import { ToastContainer, toast, Zoom } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

/*
Information about the current worksheet and its items.
*/

// TODO: dummy objects
let ace = window.ace;
toast.configure();

var WorksheetContent = (function() {
    function WorksheetContent(uuid) {
        this.uuid = uuid;
        this.info = null; // Worksheet info
    }

    WorksheetContent.prototype.fetch = function(props) {
        // Set defaults
        props = props || {};
        props.success = props.success || function(data) {};
        props.error = props.error || function(xhr, status, err) {};
        if (props.async === undefined) {
            props.async = true;
        }

componentDidMount() {
        toast.configure();
    }

},
        {
          path: 'sign/:signId',
          component: authRequired(ActiveSignEditor)
        }
      )
    }

    const router = (
      
        {routes.map((r, i) => ())}
      
    )
    toast.configure()
    if (process.env.BUGSNAG_KEY) {
      const bugsnagClient = bugsnag(process.env.BUGSNAG_KEY)
      const ErrorBoundary = bugsnagClient.use(createPlugin(React))
      return (
        
          {router}
        
      )
    } else {
      return router
    }
  }
}

import React, { useState, useRef } from 'react'
import { useSpring, animated } from 'react-spring'
import { useGesture } from 'react-use-gesture'
import { toast } from 'react-toastify'
import cn from 'classnames'
import GUI, { initialConfig } from './GUI'

import 'react-toastify/dist/ReactToastify.css'
import styles from './styles.module.css'

toast.configure({
  position: 'bottom-right',
  pauseOnHover: false,
  draggable: false
})

export default function Hero() {
  const [config, setConfig] = useState(initialConfig)
  const [shadow, setShadow] = useState(false)
  const [dragging, setDragging] = useState(false)
  const ref = useRef(null)
  const rect = useRef({})
  const prevAngleTurns = useRef([135, 0])

  const {
    threshold,
    swipeDist,

import React from "react"
import { Hub, Auth } from 'aws-amplify'
import { getThemeInfo } from '../themes/themeProvider'
import { StaticQuery, graphql } from 'gatsby'
import { toast } from 'react-toastify'
import { Global, css } from '@emotion/core'
import dankbg from "../images/dankbg.jpg"
import Amplify from 'aws-amplify'
import config from '../../jamstack-config.js'
Amplify.configure(config)
toast.configure()

const mainQuery = graphql`
  query MainQuery {
    allThemeInfo {
      edges {
        node {
          data {
            theme
            categories
            border
            borderWidth
            description
          }
        }
      }
    },

import React from "react"
import { Link } from "gatsby"
import { css } from "@emotion/core"
import { ContextProviderComponent, BlogContext } from '../context/mainContext'
import logo from '../images/logo.png'
import "easymde/dist/easymde.min.css"
import { highlight } from '../theme'
import 'react-toastify/dist/ReactToastify.css'
import { toast } from 'react-toastify';

toast.configure( {
  progressStyle: {
    background: 'black',
  }
})

class Layout extends React.Component {
  render() {
    const { theme, children } = this.props
    const { isAdmin, window: { height } } = this.props.context
    const dynamicContainerHeight = css`
      min-height: calc(${height}px - 157px);
    `
    const footerLinkWithTheme = css`
      color: ${highlight};
    `
    return (