Detecting the JSX Element name

[cgatian]

Sorry if this should be super apparent, but I've beat my head on it awhile now and need some help.

I'd like to lint and warn when a specific JSX element (MyComponent) being used using GritQL. I thought it would resemble something like this, but Im unable to get the JsxReferenceIdentifier to match on the pattern.

language js(jsx)

or {
  JsxTagExpression() as $tag where {
    $tag <: contains JsxOpeningElement() as $memberName where {
         $memberName <: contains JsxReferenceIdentifier() as $ref where {
           $ref <: `MyComponent`,  // this pattern doesnt match
           register_diagnostic(
                span=$ref,
                message="Dont use this"
            )
         }
    }
  }
}

Playground URL

The X problem:

I want to warn when JSX code has a MyComponent element, and the label attribute has a trailing colon:

<MyComponent label="test:" /> // ⚠️Should warn

I tried using basic pattern matching with a regular expression to test the label value, which I thought would be a simplier approach but for some reason I couldnt get this to work with the double-quotes?

or {
`<MyComponent $... label="$text" $... >`,
`<MyComponent $... label="$text" $... />`
} where {
     $text <: r".*:\s*$",
     register_diagnostic(
                span=$text,
                message="Dont use this"
      )
}

Any help would be appreciated! Thank you!