Seeking insight on performance discrepancy between React and LitElement components

Question

I've been conducting performance profiling to compare the rendering efficiency of React and LitElement, specifically focusing on a button component. However, the results are surprising, as LitElement is generally considered faster, yet my profiling tells a different story.

In React, I created a button component that internally calls two sub-components, let's call them Component1 and Component2.

jsx

<SampleButton>
   <Component1>
       <Component2>
            <div>

After measuring the rendering time, the average came out to be 7ms.

Now, for the LitElement Component, I structured it as follows:

html
<sample-button>
     |
  shadow-node
         |
      <lit-component1>
             |
          shadow-node
                |
              <lit-component2>
                     |
                  shadow-node
                       <div>  
             

Surprisingly, the rendering time for this LitElement button came out to be 23ms.

I'm a bit puzzled by these results and would like to seek guidance.

How can I refactor or optimize the LitElement component structure? I'm open to suggestions and eager to understand if I might be missing something crucial in my comparison.