Is putting the modal box content inside the main component's render() the best way to do modal boxes in React?

I am currently working on the Drum Machine project. I am refactoring it to make it follow the React principles closer. The way I did the modal box component was more like the vanilla JavaScript format, so I am planning on doing it the Dan Abramov way as shown in the Example: Portals example. What I don’t like about this way of doing things is that the content of the modal box is in the main component’s render(). I would like to put all of the content inside of the modal box component’s render() instead. Is that less efficient? Is there any reason it was not in the modal box component?

I am just asking this because in the Markdown Previewer project I had 9 modal boxes and 2 arrow boxes, so I think it would be more organized if every modal box was in the modal component. What do you think? Thanks for any help and have a great day!