HTML marker didn't render as expected in Advanced Marker

[chiuinggum]

I use the example in my Next.js project.
The map should render a <h2> and <p> components on the map, but instead, it seems like both are in plain text
Is there anything that I did wrong?

// map/index.js
import App from '@/components/App'
export default function Map() {
    return (
        <App />
    );
};

// components/App.js
const App = () => (
    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY} libraries=['marker']>
    <Map
        style={{ height: '100vh' }}
        zoom={12}
        center={{lat: 53.54992, lng: 10.00678}}
        mapId={process.env.NEXT_PUBLIC_MAP_ID_LIGHT}>
        <AdvancedMarker
        //   className={customMarker}
        position={{lat: 53.54992, lng: 10.00678}}>
        <h2>I am so customized</h2>
        <p>That is pretty awesome!</p>
        </AdvancedMarker>
    </Map>
    </APIProvider>
);
export default App;

[usefulthink]

Can you inspect the marker html and have a look what might cause the problem?
In my example it works fine..

Here is my code: https://codesandbox.io/p/devbox/trusting-hill-wl4xrr?file=%2Fsrc%2Fapp.tsx%3A35%2C37

[chiuinggum]

Thank you for answering. I checked everything.
Besides the fact that I used jsx/js and you used tsx, everything else looks the same.
But I'm still not sure why my code above has this problem.

BTW I don't know if this help, but I tried adding a className='text-2xl' in my <h2>, and it did show the style.

[MauricioRobayo]

I tried adding a className='text-2xl' in my <h2>, and it did show the style.

Looks like you are using Tailwindcss, if that's the case, doesn't tailwind reset default browser styles? https://play.tailwindcss.com/iA8YoHdBuS

Maybe that's why they both look like "plain text".