I’m an Emacs noob trying to set up an environment for working with React. I have trouble with getting the LS to not mark the embedded templates red in .tsx files, such as this:

import React from 'react';
import ProjectsPage from './projects/ProjectsPage';

function App() {
   return ;
}

export default App;

I followed a few steps of the guide [https://vxlabs.com/2022/06/12/typescript-development-with-emacs-tree-sitter-and-lsp-in-2022/](TypeScript development with Emacs, tree-sitter and LSP in 2022) to set up Eglot and a derived mode that specifies the TSX in the name.

This is in my init.el:

(use-package eglot
  :ensure t)

(define-derived-mode typescriptreact-mode typescript-mode
    "TypeScript TSX")
(add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescriptreact-mode))

(use-package typescript-mode
  :after tree-sitter smart-parens
  :config
  (add-to-list 'tree-sitter-major-mode-language-alist '(typescriptreact-mode . tsx)))

The typescriptreact-mode is active when i enter a .tsx-file and Eglot connects to the typescript-language-server (version 4.0 is on my path), but it doesn’t seem to tell the LS that this extended syntax should be used. What am I missing?