Alertas con react-alert no se muestran

estoy usando react-alert y demás para mostrar alertas en las validaciones de formularios y en otros casos, pero no se muestra ninguna alerta en ningun caso. Desde que empecé a usar react-alert sin antes implementarla en las validaciones no me funcionó. Leí algo sobre que al momento de exportar la alerta debía hacerlo con withAlert()(Alerts) o solo withAlert(Alerts) pero en ningun caso funciona.

Tengo el siguiente código:

Aquí configuro las alertas

import React,{Component,Fragment} from 'react';
import {withAlert} from 'react-alert';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
export class Alerts extends Component{
   static propTypes={
      error:PropTypes.object.isRequired,
      message:PropTypes.object.isRequired,
   };
   componentDidMount(prevProps){
      const{error,alert,message}=this.props;
      if(error!==prevProps.error){
     if(error.msg.nombre) alert.error(`Nombre:${error.msg.nombre.join()}`);
     if(error.msg.sustanciaActiva) alert.error(`Nombre:${error.msg.sustanciaActiva.join()}`);
     if(error.msg.cantidad) alert.error(`Nombre:${error.msg.cantidad.join()}`);
     if(error.msg.precio) alert.error(`Nombre:${error.msg.precio.join()}`);
     if(error.msg.non_field_errors) alert.error(error.msg.non_field_errors.join());
     if(error.msg.username) alert.error(error.msg.username.join());
      }
      if(message!==prevProps.message){
     if(message.deleteProduct) alert.success(message.deleteProduct);
     if(message.addProduct) alert.success(message.addProduct);
     if(message.passwordNotMatch) alert.error(message.passwordNotMatch);
      }
   }
   render(){
      return <Fragment/>;
   }
}
const mapStateToProps=(state)=>({
   error:state.errors,
   message:state.messages,
});
export default connect(mapStateToProps)(withAlert()(Alerts));

Aquí incluyo las alertas en la App.

import React,{Component,Fragment} from 'react';
import AlertTemplate from 'react-alert-template-basic';
import {positions,Provider as AlertProvider} from 'react-alert';
import {Provider} from 'react-redux';
import ReactDOM from 'react-dom';
import {HashRouter as Router, Route,Switch,Redirect} from 'react-router-dom';
import Header from './layout/Header';
import Dashboard from './products/Dashboard';
import Alerts from './layout/alerts';
import Login from './accounts/Login';
import Register from './accounts/Register';
import PrivateRoute from './common/PrivateRoute';
import {loadUser} from '../actions/auth';
import store from '../store';
const alertOptions={
   timeout:3000,
   position:positions.BOTTOM_CENTER,
};
class App extends Component{
   componentDidMount(){
      store.dispatch(loadUser());
   }
   render(){
      return(
     <Provider store={store}>
     <AlertProvider template={AlertTemplate}{...alertOptions}>
     <Router>
     <Fragment>
        <Header/>
        <div className="container">
           <Switch>
          <PrivateRoute exact path="/" component={Dashboard}/>
          <Route exact path="/register" component={Register}/>
          <Route exact path="/login" component={Login}/>
           </Switch>
        </div>
     </Fragment>
     </Router>
     </AlertProvider>
     </Provider>
      )
   }
}
ReactDOM.render(<App/>,document.getElementById('app'));

De antemano gracias.