Quais as diferenças entre as extensões .ts e .tsx no TypeScript para React?

Olá a todos! Recentemente comecei a estudar TypeScript em conjunto com React e me deparei com uma situação que não entendi. Quando crio componentes, vejo que nos projetos são usadas duas extensões diferentes: `.ts` e `.tsx`. Por exemplo, tenho um arquivo `Button.ts` e um arquivo `App.tsx`. Ambos contêm código TypeScript, mas quando tento escrever JSX dentro do arquivo `.ts`, o editor de código reclama, e ao renomear para `.tsx` tudo funciona. Aqui está um exemplo do meu código que não funciona em `Button.ts`: ```typescript import React from 'react'; interface ButtonProps { label: string; onClick: () => void; } // Erro: JSX não é suportado em arquivos .ts const Button: React.FC = ({ label, onClick }) => { return {label}; }; ``` E este mesmo código funciona perfeitamente se o arquivo for salvo como `Button.tsx`. Também notei que alguns dos meus colegas usam `.ts` para utilitários simples e tipos, e `.tsx` apenas para componentes com marcação. Mas existe alguma regra