Is creating button group with `<figure>` correct and comply with WCAG?

I am creating a button group with label like this:

The HTML code I am now writing:

<figure class="toggler-widget">
  <figcaption class="toggler-label">Sort By:</figcaption>
  <ul class="button-togglers">
    <li class="choice-selected">
      <button type="button" title="Sort by title" aria-label="Sort by title" aria-pressed="true"></button>
    </li>
    <li>
      <button type="button" title="Sort by date" aria-label="Sort by date" aria-pressed="false"></button>
    </li>
  </ul>
</figure>

Based on the description and example on MDN:

Usually a <figure> is an image, illustration, diagram, code snippet, etc.

Seems <figure> is used for text / image / diagram that having a description only.

I am now so confused that if I am using it right or if there is any better way to code this widget?

No, it is not correct according to WCAG. The documentation you have quoted is correct but you misunderstood the explanation. The very first quote is as follows:

The <figure> HTML element represents self-contained content, potentially with an optional caption, which is specified using the <figcaption> element. The figure, its caption, and its contents are referenced as a single unit.

Followed by this code example:

<figure>
  <img src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset" />
  <figcaption>An elephant at sunset</figcaption>
</figure>

What you're doing is labeling the buttons not giving an optional caption to an image. As a matter of fact, the image is completely irrelevant for your toggler. The main function of the toggle are the buttons and the image is just decoration.

Since you can't use a label for 2 buttons you can either refer to aria-labelledby or aria-describedby.
Additionally, the correct list container for control elements is <menu>:

<span id="toggler-label">Sort By:</span>
<menu class="button-togglers">
  <li class="choice-selected">
    <button type="button" aria-describedby="toggler-label" aria-label="Sort by title" aria-pressed="true"></button>
  </li>
  <li>
    <button type="button" aria-describedby="toggler-label" aria-label="Sort by date" aria-pressed="false"></button>
  </li>
</menu>