onClick event not being handled/fired while testing - Custom component with Lit Element using React Wrapper

Question

I have this below component that is a Header Component with an AccessBar and an Icon Component with certain props. All the custom components are actually Lit Element components (uses shadowDOM) from a custom library of my org. I've created a custom wrapper to convert it to React Component using @lit-labs/react - Create Component. The app works completely fine and understands all the props/events of the custom component when passed down via React Component. The app is developed and in prod already.

Facing an issue where when I'm trying to test user interaction with the Header Component but it just doesnt fire or change the state.

 return (
    <>
      <Desktop>
        <AccessBar data-testid="access-bar" id="header" label="PV Chat Companion" slot="access">
          <Icon
            size="m"
            slot="functions"
            button
            icon="circle-half"
            data-testid="theme-icon"
            onClick={() => setFirstName('Biplab')}
          />
          <UserIdentifier
            slot="user"
            initials={initials}
            data-testid="user-id"
            name={`${firstName} ${lastName}`}
            unauthenticated={userStatus !== UserStatus.loggedIn}
            image={`url(${profilePicture})`}
            id="user-icon"
          />
        </AccessBar>
      </Desktop>
    </>
  );

and the firstName in UserIdentifier is a localState created using useState. One thing I noticed is that when it uses screen.debug() the DOM tree just breaks it down till the identifier component used in Lit Element. For Example: will but and the implement will be hidden.

The below is the test for the component to check if it changed the name prop. (In reality the Icon will dispatch an action to change the state of theme)

import { screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';  
import { render } from './test-utils';
import { useDispatch, useSelector } from "react-redux";
import { UserStatus } from '../redux/userSlice';
import { Header } from '../components/Header/Header';
import '@testing-library/jest-dom'
import { setTheme } from '../redux/appearanceSlice';


describe('User event test', () => {
  test('renders Header component', async () => {
    const preloadedState = {
      user: {
        status: UserStatus.loggedIn,
        firstName: 'John',
        lastName: 'Doe',
        profilePicture: 'profile-pic-url',
      },
    };

    const {store} = render(<Header />, { preloadedState });
    const accessBarElement = await waitFor(() => screen.getByTestId('access-bar'));
    expect(accessBarElement).toHaveAttribute('label', 'PV Chat Companion');

    const themeIcon = await waitFor(() => screen.getByTestId("theme-icon"));
   
    await userEvent.click(themeIcon);

    await waitFor(() => {
      const userIdElement = screen.getByTestId('user-id');
      expect(userIdElement).toHaveProperty('name', 'Biplab Doe');
    });


    screen.debug();
  });
});

The error I get is that expected Biplab Doe but got John Doe since the firstName initial state is set to John.