Added new react basics provider.

components/pages/settings/users/UserSettings.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Breadcrumbs, Item, Tabs, useToast } from 'react-basics';
+import { Breadcrumbs, Item, Tabs, useToasts } from 'react-basics';
 import Link from 'next/link';
 import UserEditForm from 'components/pages/settings/users//UserEditForm';
 import Page from 'components/layout/Page';
@@ -14,7 +14,7 @@ export function UserSettings({ userId }) {
   const [values, setValues] = useState(null);
   const [tab, setTab] = useState('details');
   const { get, useQuery } = useApi();
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const { data, isLoading } = useQuery(
     ['user', userId],
     () => {
@@ -44,7 +44,6 @@ export function UserSettings({ userId }) {
 
   return (
     <Page loading={isLoading || !values}>
-      {toast}
       <PageHeader
         title={
           <Breadcrumbs>

components/pages/settings/users/UsersList.js

@@ -1,4 +1,4 @@
-import { useToast } from 'react-basics';
+import { useToasts } from 'react-basics';
 import Page from 'components/layout/Page';
 import PageHeader from 'components/layout/PageHeader';
 import EmptyPlaceholder from 'components/common/EmptyPlaceholder';
@@ -15,7 +15,7 @@ export function UsersList() {
   const { data, isLoading, error, refetch } = useQuery(['user'], () => get(`/users`), {
     enabled: !!user,
   });
-  const { toast, showToast } = useToast();
+  const { showToast } = useToasts();
   const hasData = data && data.length !== 0;
 
   const handleSave = () => {
@@ -30,7 +30,6 @@ export function UsersList() {
 
   return (
     <Page loading={isLoading} error={error}>
-      {toast}
       <PageHeader title={formatMessage(labels.users)}>
         <UserAddButton onSave={handleSave} />
       </PageHeader>