fixing JSX error don't fix highlighting of the whole expression

[jcubic]

Steps to reproduce:

This my testing code

const IndexPage = () => {
    const [message, setMessage] = useState('');
    return (
        <>
          <h1>Hello Snippit</h1>
          <button onClick={ async () => {
              setMessage(await echo(prompt('What?')));
          }}>Click</button>
          { message }
        </>
    );
};

if you delete ending > from </> it shows broken JSX. But if you fix the error the highlighting doesn't come back. I use file .tsx with tide for TypeScript reactJS code. Here is the screenshot:

To fix this I need to reload the buffer. The screen maybe gives a clue what is the issue, it seems that some backward detection is used to update the face but that code doesn't detect the whole JSX expression.

When I refresh the buffer/window I got this: