reactjs - Vad är det korrekta sättet att ladda ett anpassat HTML-element med React och Typescript?

Så jag försöker ladda lite LaTeX på min webbplats, och jag är inte säker på om detta är det bästa sättet att göra det på, söker lite råd eftersom jag är ganska ny på Typescript.

main.tsx

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <Latex path="/latex/latex.tex"/>
      <TextBox></TextBox>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
);

index.html

    <script type="module">
        import { LaTeXJSComponent } from "https://cdn.jsdelivr.net/npm/latex.js/dist/latex.mjs"
        customElements.define("latex-js", LaTeXJSComponent)
      </script>    
      <style>
        latex-js {
          display: inline-block;
          width: 55%;
          border: 1px solid rgb(0, 0, 0);
          margin-right: 2em;
        }
      </style>    
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>

App.tsx:

import * as React from 'react';
import { useEffect, useState } from 'react';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import TextareaAutosize from '@mui/base/TextareaAutosize';
import { styled } from "@mui/material/styles";
import Button from '@mui/material/Button';
import SendIcon from '@mui/icons-material/Send'
import { Alert } from '@mui/material';

declare global {
    namespace JSX {
      interface IntrinsicElements {
        'latex-js': any;
      }
    }
}

export function Latex({ path }: { path: string }) {    
    const [fileContent, setFileContent] = useState('');
    useEffect(() => {
      async function fetchFile() {
        try {
          const response = await fetch(path);
          const text = await response.text();
          setFileContent(text);
        } catch (error) {
          console.error('Error fetching file:', error);
        }
      }
  
      fetchFile();
    }, []);
    
    return (
        <center>
        <div>
            <latex-js>{fileContent}</latex-js>
        </div>
        </center>
    );
}

Sättet jag för närvarande gör det på är att importera skriptet i HTML, skapa ett specialanpassat HTML-element som heter "latex-js" och sedan i App.tsx-filen ladda LaTeX-data från en fil och infoga det som en tagg. Eftersom jag är ny inom hela webbapputvecklingsgrejen undrade jag om någon vet ett bättre sätt att närma sig den här typen av saker.