title: Get value from CMS template variable (SilverStripe) into React.js component props
body: <p>I am attempting to render a React.js component on a page template (Page.ss) in a Silverstripe CMS instance. I have the following react component:</p>
  <pre><code>import styles from './myComponent.module.scss';
  
  type Props = {
    pageTitle?: string;
  };
  
  
  const ExampleReactComponent = ({ pageTitle = 'Home'}: Props): JSX.Element =&gt; {
    return (
      &lt;div className={styles['example-sync-component']}&gt;
        This is a React component. Here is a prop: &lt;em&gt;{pageTitle}&lt;/em&gt;
      &lt;/div&gt;
    );
  };
  
  
  export default ExampleReactComponent;
  </code></pre>
  <p>This renders into Page.ss (CMS template) with:</p>
  <pre><code>&lt;div data-component=&quot;my-component&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>And displays the value of pageTitle (e.g. 'Home') correctly. But I would like to be able to do something like:</p>
  <pre><code>&lt;div data-component=&quot;my-component&quot; data-page-title=&quot;$Title&quot;&gt;&lt;/div&gt;
  </code></pre>
  <p>... where $Title is a variable on the Silverstripe template that will return 'Home'.
  How can I get the value from the template variable into the props for my react component? Thanks.</p>