#### Improve consistency for JSX in optional method call (#17616 by @seiyab)

<!-- prettier-ignore -->
```jsx
// Input
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

// Prettier stable (ESTree based parsers like espree and typescript)
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => <h2 key={i}>{i + 1}</h2>)}
  </div>
</SuspendyTree>;

// Prettier stable (babel and babel-ts parser)
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;

// Prettier main (parsers of both types)
<SuspendyTree>
  <div style={{ height: 200, overflow: "scroll" }}>
    {Array(20)
      .fill()
      ?.map((_, i) => (
        <h2 key={i}>{i + 1}</h2>
      ))}
  </div>
</SuspendyTree>;
```