HMR improvements for .ts files that include jsx

Describe the bug

I have a bunch of hooks that handle logic behind rendering tables.

For example:

export const useAnimalTable = ({
  onRowClick,,
}: UseAnimalTableArgs) => {
  const { t } = useTranslation();
  const { isRegionalAdmin } = useCurrentUser();
  const queryClient = useQueryClient();

  const [animalFilter, setAnimalFilter] = useState<string>();

  const columns: ColumnDef<AnimalTableData, any>[] = [
    {
      accessorKey: "animal",
      enableSorting: true,
      header: (c) => (
        <SortableHeader label={t("animal")} column={c}>
          <Filter
            inputName="animal"
            value={animalFilter}
            setValue={onChangeAnimalFilter}
            ref={animalRef}
          />
        </SortableHeader>
      ),
    },
    //... more stuff down here}

And this returns the columns along with a bunch of functions also declared in the hook.

I use a .tsx file extension for this file to get proper syntax highlighting but also because using a .ts extension causes all sorts of errors to pop out because the components and the jsx aren't recognised. But this causes the hmr invalidate warning for consistent components exports.

Reproduction

https://github.com/vitejs/vite-plugin-react/discussions/288

Steps to reproduce

No response

System Info

linux

Used Package Manager

npm

Logs