ReactJS: Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node

I'm developing a ReactJS application where I'm doing some conditional rendering and on that basis, I'm displaying a component on one of the pages of my application. Below is an example code:

    this.state.editButtonClicked ? (<EditElement>) : (<NonEditElement 
      FY19={this.state.productDetails.FY19}
      FY20={this.state.productDetails.FY20}
      FY21={this.state.productDetails.FY21}
      FY22={this.state.productDetails.FY22}
      FY23={this.state.productDetails.FY23}
 >)}

By default the value of the property editButtonClicked is false and NonEditElement component is being displayed accordingly, but when the I click a certain button then the value of the editButtonClicked property becomes true and it's during that time, I end up with the below-mentioned error:

Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

When I'm commenting out or removing the <NonEditElement /> component and replacing it with <></>, then everything is working as expected which is really weird.

I'm really not sure why this is happening since I have developed some ReactJS application before and I have done similar things and never faced any such problem before. I checked out other similar questions like this and this that have been asked here on StackOverflow but none of them proved to be helpful in my case. It would be really great if someone could provide me some guidance as to why I'm running into this problem.

Any help would be highly appreciated. Thanks!