React-native-webview injectedJavaScript cannot detect styled components classname

I am using react-native-webview package for the WebView. In my WebView link, I want to hide navbar, footer and cookies form from my WebView. The web url made by styled-components. I used google chrome's inspect and then target the class name of the nav bar and made variable where I added the display none and pass this variable to WebView's props injectedJavaScript but seems like my style does not detect styled-components class name. I tested my javascript styling in other website which does not use styled-components and it works.

I don't know how to fix this issue.

I shared my code in Exop-snacks.

        import React from 'react';
        import styled from 'styled-components/native';
        
        import { WebView } from 'react-native-webview';
        import Loader from './loading/loader';
       const weburl = 'https://www.s-kaupat.fi/sivu/usein-kysytyt-kysymykset'
        
        const Container = styled.View`
          flex: 1;
        `;
        
       
const WebScreen = () => {
  const jsCode = `
  document.querySelector('.nav.global-navstyles__StyledNav-sc-1wl5s1s-0.cBIlxL').style.display = 'none'; // this does not work
 
`;
  return (
    <Container>
      <WebView
        source={{
          uri: weburl,
        }}
        startInLoadingState={true}
        renderLoading={() => <Loader />}
        // injectedJavaScript require passing onMessage function
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        onMessage={() => {}}
        injectedJavaScript={jsCode}

       javaScriptEnabled={true}
      />
    </Container>
  );
};

export default WebScreen;