ESLint rule to ensure JSX text nodes are not mixed with other nodes

On my React application, I noticed multiple errors on production reported by Sentry. It was mostly: NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.. I discovered that these errors are actually caused by Google Translate that is messing with React DOM: https://github.com/facebook/react/issues/11538

So now, if I want my React application to be more resilient to Google Translate and other plugins that changes the page DOM, I would like to ensure that text nodes are never mixed with other nodes. For that I am looking for an ESLint rule that would:

Raise an error for this code:

<div>
  {condition && 'Welcome'}
  <span>Something</span>
</div>

And instead, accept the following code:

<div>
  {condition && <span>Welcome</span>}
  <span>Something</span>
</div>

Is there already an ESLint rule that does that? If no, do you have any clue to build this rule?