How to use the @ohif/ui.useSnackbarContext function in @ohif/ui

function ViewerRetrieveStudyData({
  server,
  studyInstanceUids,
  seriesInstanceUids,
  clearViewportSpecificData,
}) {
  // hooks
  const [error, setError] = useState(false);
  const [studies, setStudies] = useState([]);
  const [isStudyLoaded, setIsStudyLoaded] = useState(false);
  const snackbarContext = useSnackbarContext();
  const { appConfig = {} } = useContext(AppContext);
  const { filterQueryParam: isFilterStrategy = false } = appConfig;

  let cancelableSeriesPromises;
  let cancelableStudiesPromises;
  /**
   * Callback method when study is totally loaded
   * @param {object} study study loaded
   * @param {object} studyMetadata studyMetadata for given study
   * @param {Object} [filters] - Object containing filters to be applied
   * @param {string} [filter.seriesInstanceUID] - series instance uid to filter results against
   */
  const studyDidLoad = (study, studyMetadata, filters) => {
    // User message
    const promoted = _promoteList(
      study,

hidden: true,
    },
  ]);
  const [tabsState, setTabsState] = useState({
    Hotkeys: { hotkeyDefinitions, hotkeyRecord },
    'Window Level': { windowLevelData },
    General: { generalPreferences },
  });
  const [tabsError, setTabsError] = useState(
    tabs.reduce((acc, tab) => {
      acc[tab.name] = false;
      return acc;
    }, {})
  );

  const snackbar = useSnackbarContext();

  const { t, ready: translationsAreReady } = useTranslation(
    'UserPreferencesModal'
  );

  const onTabStateChanged = (tabName, newState) => {
    setTabsState({ ...tabsState, [tabName]: newState });
  };

  const onTabErrorChanged = (tabName, hasError) => {
    setTabsError({ ...tabsError, [tabName]: hasError });
  };

  const hasAnyError = () => {
    return Object.values(tabsError).reduce((acc, value) => acc || value);
  };