user-mapping-package/src/components/SnackbarComponent.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

import React, { useState, useEffect } from 'react';
import Toast from 'devextreme-react/toast';

const SnackbarComponent = ({ open, message, severity = 'info', duration = 6000, onCloseCallback }) => {
  const [isOpen, setIsOpen] = useState(open);

  useEffect(() => {
    setIsOpen(open);
  }, [open]);

  const handleClose = () => {
    setIsOpen(false);
    if (onCloseCallback) {
      onCloseCallback();
    }
  };

  // Mapping severity to Toast type
  const toastType = severity === 'error' ? 'error' : severity === 'warning' ? 'warning' : severity === 'success' ? 'success' : 'info';

  return (
    <Toast
      visible={isOpen}
      message={message}
      type={toastType}
      displayTime={duration}
      onHiding={handleClose}
      width="350px"
      position={{ my: 'top right', at: 'top right', offset: '-5 15' }}
    />
  );
};

export default SnackbarComponent;