Не могу навесить Ripple Effect

недавно начал изучать ReactJS(новичек) и столкнулся с маленькой проблемкой...

Я пытаюсь навесить на элементы меню эффект Ripple из MDC, но никак не получается...

Делаю по гайду react-ripple: Ссылка, но не могу побороть одну ошибку... You must call initRipple from the element's ref prop to initialize the adapter for withRipple. Я по сути понимаю что не так, но не получается исправить...

Возможно уже что то в коде намудрил... Насколько я понимаю проблема заключается в переборке данных...

Вот код Ripple.js

import React, { Component } from 'react';
import axios from 'axios';
import {NavLink} from 'react-router-dom';
import withRipple from '@material/react-ripple';
const MyInput = (props) => {
    const {
        rippleActivator
    } = props;
    return (
        <input ref={rippleActivator}/>
    );
}
class Ripple extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            modules: []
        };
        const {
            initRipple,
        } = this.props;
        this.rippleActivator = React.createRef();
        this.init = (el) => {
            this.props.initRipple(el /* surface */, this.rippleActivator.current /* activator */);
        }
    }
    componentDidMount() {
        axios.post('/api/modules', {
            'jsonrpc': '2.0'
        })
            .then(response => {
                this.setState({ modules: response.data.result })
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    render() {
        const {modules} = this.state;
        console.log(this);
        var MenuList = modules.map(function(item, index) {
            return (
                <div ref={this.init} key={index}>
                    <NavLink to={'/modules/' + item.name} className="item ripple-component" activeClassName="active">
                        {item.label}
                        <MyInput rippleActivator={this.rippleActivator} />
                    </NavLink>
                </div>
            )
        });
        return (
            <div className="menu">
                {MenuList}
            </div>
        )
    }
}
const MyRippledComponent = withRipple(Ripple);
export default MyRippledComponent;