False positive react/jsx-indent when working with DoExpression

[Kenneth-KT]

Description

Given eslint-plugin-react is used with babel's do-expressions proposal, it produces a false-positive react/jsx-indent error suggesting the user to indent one level more than needed if a JsxElement is the last statement in the DoExpression block. The JsxElement in the last statement is intended to be the return value of the DoExpression.

Environment

indentation 2 spaces
babel plugin '@babel/plugin-proposal-do-expressions'
eslint parser 'babel-eslint'
eslint plugin 'eslint-plugin-babel'
eslint rule no-unused-expressions: 0
eslint rule babel/no-unused-expressions: 2

Input code

import React from 'react';

const TestDoExpression = () => (
  <div>
    <div>1</div>
    {do {
      const num = 1 + 1;
      <div>{num}</div>;
    }}
    <div>3</div>
  </div>
);

export default TestDoExpression;

Expected outcome

No errors

Actual outcome

Error with message below:

/TestDoExpression.jsx
8:7  error  Expected indentation of 8 space characters but found 6  react/jsx-indent

[ljharb]

Wrap it in parens?