moustache syntax strangely not working in tsx file

I want to use mason and moustache syntax for generating this file I want to replace my import names and type names inside the ts file with the prompt name var.

I have only 1 var in my mason.yaml

vars:
  name:
    type: string
    description: Your name
    default: generic
    prompt: What is your type name?




import { useRef, useState } from 'react';

import type { ColDef, SelectionChangedEvent } from 'ag-grid-community';
import type { AgGridReact } from 'ag-grid-react';

import Modal from '@components/Modal/Modal';
import BaseTable from '@components/Tables/BaseTable';
import type { I{{#sentenceCase}}{{name}}{{/sentenceCase}}TableData } from '@components/Tables/{{#camelCase}}{{name}}{{/camelCase}}Helper';
import {
  generate{{#sentenceCase}}{{name}}{{/sentenceCase}}Data,
  {{#upperCase}}{{name}}{{/upperCase}}_COL_DEF,
  {{#upperCase}}{{name}}{{/upperCase}}_HEADER_MAP,
} from '@components/Tables/{{#camelCase}}{{name}}{{/camelCase}}Helper';
import { MenuBarButton } from '@components/Tables/MenuBarButton';
import MenuBarWrapper from '@components/Tables/MenuBarWrapper';
import CreateEditModal from '@components/Modal/create-modal';

const {{#camelCase}}{{name}}{{/camelCase}}Data: I{{#sentenceCase}}{{name}}{{/sentenceCase}}TableData[] = generate{{#sentenceCase}}{{name}}{{/sentenceCase}}Data(1000) as I{{#sentenceCase}}{{name}}{{/sentenceCase}}TableData[];

interface IModalData {
  type: 'delete' | 'modify' | 'add';
  title: string;
  data: object[][] | [];
}

export default function {{#sentenceCase}}{{name}}{{/sentenceCase}}() {
  const [columnDefs] = useState<ColDef[]>({{#upperCase}}{{name}}{{/upperCase}}_COL_DEF);
  const [isAnyRowSelected, setIsAnyRowSelected] = useState(false);
    </>
  );
}

But when I run mason make ... the final result is not replacing the name var at all

import { useRef, useState } from 'react';

import type { ColDef, SelectionChangedEvent } from 'ag-grid-community';
import type { AgGridReact } from 'ag-grid-react';

import Modal from '@components/Modal/Modal';
import BaseTable from '@components/Tables/BaseTable';
import type { I{{#sentenceCase}}{{name}}{{/sentenceCase}}TableData } from '@components/Tables/{{#camelCase}}{{name}}{{/camelCase}}Helper';
import {
  generate{{#sentenceCase}}{{name}}{{/sentenceCase}}Data,
  {{#upperCase}}{{name}}{{/upperCase}}_COL_DEF,
  {{#upperCase}}{{name}}{{/upperCase}}_HEADER_MAP,
} from '@components/Tables/{{#camelCase}}{{name}}{{/camelCase}}Helper';
import { MenuBarButton } from '@components/Tables/MenuBarButton';
import MenuBarWrapper from '@components/Tables/MenuBarWrapper';
import CreateEditModal from '@components/Modal/create-modal';

const {{#camelCase}}{{name}}{{/camelCase}}Data: I{{#sentenceCase}}{{name}}{{/sentenceCase}}TableData[] = generate{{#sentenceCase}}{{name}}{{/sentenceCase}}Data(1000) as I{{#sentenceCase}}{{name}}{{/sentenceCase}}TableData[];

interface IModalData {
  type: 'delete' | 'modify' | 'add';
  title: string;
  data: object[][] | [];
}

It should be a very easy issue, because I have another .tsx file and there it works, but I tried to delete it, recreate it, rename it, nothing helped. any idea?

I found it, the issue was with 3 curly braces:

this one is working

headers={({{#upperCase}}{{name}}{{/upperCase}}_HEADER_MAP)}

instead of the bad one:

headers={{{#upperCase}}{{name}}{{/upperCase}}_HEADER_MAP}