addEventListener is not responding for materialize chips in react

This is the problem

We set the dropdown button here:

export default class OtherForm extends Component {
    componentDidMount(){
        document.addEventListener('DOMContentLoaded', function() {
            var elems = document.querySelectorAll('.dropdown-trigger');
            var instances = M.Dropdown.init(elems, );
          });
    }
    render() {
        return (
            <div className="container" style={{marginTop: "50px"}}>
                <MyDropdown/>
            </div>

        )
    }
}

We are rendering forms depending on the dropdown button click

class MyDropdown extends React.Component{
    constructor(props){
        super(props);
        this.state ={
            Type: null,
        };
    }

    handleChange(renderType){
        this.setState({
            Type: renderType,
        })
    }

    renderIT(){
        if (this.state.Type === "FirstForm"){
            return <FirstForm/>
        }
        if (this.state.Type === "SecondForm"){
            return <SecondForm/>
        }
    }

    render(){
        const renderType = this.state.Type;
        return(
           <div>
                <a className='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
                <ul id='dropdown1' className='dropdown-content'>
                    <li><a href="#!" onClick={() => this.handleChange("FirstForm")}>First</a></li>
                    <li><a href="#!" onClick={() => this.handleChange("SecondForm")}>Second</a></li>
                    <li className="divider" tabindex="-1"></li>

                </ul>
                <div id="placeholder"></div>
                {this.renderIT()}

           </div>

        )
    }

}

The problem when rendering the chips:

class FirstForm extends React.Component{


    componentDidMount(){
        document.addEventListener("DOMContentLoaded", function() {
            var elems = document.querySelectorAll('.chips');
            var instances = M.Chips.init(elems, {
                placeholder: "Enter Aliases",
                secondaryPlaceholder: "+Alias",
              });
        });
        console.log("Chips")
    }


    render(){
        return(
            <div className="chips chips-placeholder" id="sir"></div>
        )
    }
}

When rendered I get this: rendered page image

I am unable to click or anything. Like addEventListener did not work.

But when I put chips, and addEventListener in the MyDropdown class (one layer above), it works.

class MyDropdown extends React.Component{

    ...

    componentDidMount(){
        document.addEventListener("DOMContentLoaded", function() {
            var elems = document.querySelectorAll('.chips');
            var instances = M.Chips.init(elems, {
                placeholder: "Enter Aliases",
                secondaryPlaceholder: "+Alias",
              });
        });
        console.log("Chips")
    }

    ...

    render(){
        const renderType = this.state.Type;
        return(
           <div>
                <a className='dropdown-trigger btn' href='#' data-target='dropdown1'>Drop Me!</a>
                <ul id='dropdown1' className='dropdown-content'>
                    <li><a href="#!" onClick={() => this.handleChange("FirstForm")}>First</a></li>
                    <li><a href="#!" onClick={() => this.handleChange("SecondForm")}>Second</a></li>
                    <li className="divider" tabindex="-1"></li>

                </ul>
                <div id="placeholder"></div>
                {this.renderIT()}
                <div className="chips chips-placeholder" id="sir"></div>

           </div>

        )
    }

}

Rendered site: working rendered image

Is there a problem because there are multiple layers, or there is another reason (I'm a newbie so I don't know a lot of things)?

<OtherForm>
    <MyDropdown>
        <FirstForm>
            <div className='chips'>