TypeError: this.notificationDOMRef.current.addNotification is not a function

Steps to reproduce:

export default class AddTenant extends React.Component {
    constructor(props) {
        super(props);
        this.notificationDOMRef = React.createRef();
    }

    addNotification = (message)=> {
        this.notificationDOMRef.current.addNotification( {
          title: "Awesomeness",
          message:{message},
          type: "success",
          insert: "top",
          container: "top-right",
          animationIn: ["animated", "fadeIn"],
          animationOut: ["animated", "fadeOut"],
          dismiss: { duration: 2000 },
          dismissable: { click: true }
        });

    }

    handleFormSubmit = (e)=>{
        e.preventDefault();
        const { history } = this.props
        this.addNotification("Success");
    }

    render() {

      return (
        <div>
               <ReactNotification ref={this.notificationDOMRef} />
                <form onSubmit={this.handleFormSubmit} novalidate>
                          <button className='btn btn-success'>Create</button>
                 </form>
        </div>
      );
    }
}

my package.json

{
  "name": "hrms",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "bootstrap": "^4.5.0",
    "moment": "^2.27.0",
    "react": "^16.13.1",
    "react-bootstrap": "^1.0.1",
    "react-bootstrap-date-picker": "^5.1.0",
    "react-datepicker": "^3.0.0",
    "react-dates": "^21.8.0",
    "react-dom": "^16.13.1",
    "react-icons": "^3.10.0",
    "react-notifications-component": "^2.4.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.1",
    "react-select": "^3.1.0",
    "reactstrap": "^8.5.0"
  },
  "scripts": {
    "start": "react-scripts start --no-cache",
    "build": "react-scripts build",
    "test": "react-scripts test --no-cache",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "babel-plugin-react-html-attrs": "^3.0.4"
  }
}

teodosii / react-notifications-component

TypeError: this.notificationDOMRef.current.addNotification is not a function #73