Why can’t I print Webform submission values in an Twig-templated HTML mail?

This is further to https://www.drupal.org/project/webform/issues/2946976.

I'm trying to use a Twig template for the HTML email that is sent upon webform submission; I'm using Symfony Mailer for the HTML.

I have the twig template working, by:

1. Selecting Twig template as the formatter for the email body
2. Naming my twig file webform-email-message-html--WEBFORM-ID.html.twig and placing it in my theme folder.

Now I can't get the webform_submission values to appear in the rendered email. I've tried:

1. {{ webform_token('[webform_submission:values:field_name]', webform_submission, [], options) }}
2. {{ data.field_name }}
3. {webform_submission:values:field_name }}

I have the following code in my .module file:

function my_module_preprocess_webform_email_message_html(&$variables) {
  /** @var \Drupal\webform\WebformSubmissionInterface $webform_submission */
  $webform_submission = $variables['webform_submission'];
  $variable['data'] = $webform_submission->getData();
}

When I use the three options to render the field value within Webform's internal Twig template handler, they work fine, but when I use them in my custom Twig file, they are blank.

Help is appreciated.

Thanks

I have a webform with an email handler that use a twig template for the body field - not a separate twig file. Here's an example of one of the emails - it renders the image (vs a link to the image file).

Star Choice is an image select field. All other webform elements are text-based.

<h1>Congratulations!</h1>
<p>You've received a Shooting Star Award from {{ webform_token('[webform_submission:values:your_name]', webform_submission) }}!</p>
<p>{{ webform_token('[webform_submission:values:additional_comments_sent_in_email_]', webform_submission) }}


<table style="width:1200px; padding:20px; text-align:center; border: 10px solid #D4AF37">
<tr>
<td>

<table style="width:1150px; padding:20px; text-align:center; border: 5px solid #000">

<tr>
<td colspan="2">

<span style="font-family:'Brush Script MT', cursive; color:#003399;font-size:86px;">Shooting Star Award</span>
{{ webform_token('[webform_submission:values:star_choice]', webform_submission) }}

<h2 align="center">{{ webform_token('[webform_submission:values:award_recipient_name]', webform_submission) }}</h2>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
<p><strong>is hereby receiving this Shooting Star Award for</strong></p>
<p>{{ webform_token('[webform_submission:values:award_reason]', webform_submission) }}<br />
{{ webform_token('[webform_submission:values:award_comments_included_on_the_certificate_]', webform_submission) }}</p>
</td>
</tr>
<tr>
  <td><img src="https://intranet.epa.gov/sites/default/files/2020-09/seal.png" height="200" /></td>
  <td>
  <p style="font-size:24px;">PRESENTED BY: {{ webform_token('[webform_submission:values:your_name]', webform_submission) }}</p>
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
<p style="font-size:24px;">ON THIS DAY: {{ webform_token('[webform_submission:created]', webform_submission) }}</p>

<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</td>
</tr>
</table>
</td>
</tr>
</table>