Need single block for all react toast messages either failure or success in react toastify

Question

By default in react we receive react-toastify like in attached image below. But now project demands all messages in one block or div, with one cross button and notification count on top with one timer and with a scrollbar to see all messages.

I have tried with redux but now need to remove redux. Please see if anyone can help in this by using only react. Or if react-toastify giving this functionality.

import React, { useContext, useState, useReducer } from 'react';
import { ToastContext } from './App';

import { closeToast, showToast } from '../store/toast/action';
import { connect } from 'react-redux';
const ToastContainer = styled.div`
  width: 350px;
  position: absolute;
  top: 100px;
  right: 16px;
  background: #c12335;
  z-index: 9999;
  color: white;
  padding: 12px;
  display: ${props => (props.hide ? 'none' : '')};
`;
const ViewMore = styled.div`
  text-align: right;
  margin-top: 4px;
  text-decoration: underline;
  cursor: pointer;
`;
const CloseButton = styled.div`
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: right;
`;
const ToastList = styled.div`
  margin-top: 8px;
  max-height: 160px;
  overflow: auto;
`;

const CustomToast = props => {
  const { toastList, closeToast } = props;
  const [showAll, setShowAll] = useState(false);
  const toastCount = toastList.length;
  const list = showAll ? toastList : toastList.slice(0, 5);
  return (
    <ToastContainer hide={toastCount == 0}>
      <div>
        <CloseButton
          onClick={() => {
            setShowAll(false);
            closeToast();
          }}
        >
          x
        </CloseButton>
        {toastCount} New Notifications
      </div>
      <PerfectScrollbar>
        <ToastList>
          {list.map((toastContent, index) => (
            <div key={'toast-' + index}>
              <span class="fa fa-exclamation-triangle"></span> {toastContent}
            </div>
          ))}
        </ToastList>
      </PerfectScrollbar>
      {toastList.length > 5 && !showAll && (
        <ViewMore onClick={() => setShowAll(true)}>View More....</ViewMore>
      )}
    </ToastContainer>
  );
};
const mapStateToProps = state => {
  return {
    toastList: state.toast.toastList,
  };
};
const mapDispatchToProps = {
  showToast,
  closeToast,
};
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CustomToast);