초기세팅 관련 질문

웹뷰로 한 사람들 App.tsx 세팅 어떻게 해야되나요. ‘TDS Mobile 시작하기’ 페이지에서는

import { TDSMobileAITProvider } from '@toss/tds-mobile-ait';
 
function App({ Component, pageProps }) {
  return (
    <TDSMobileAITProvider>
      <Component {...pageProps} />
    </TDSMobileAITProvider>
  );
}

이렇게 하라고 하는데 이렇게 세팅하면 화면에 렌더링 되는것이 아무것도 없어 조코딩 영상에 나온 것 처럼

import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from '@toss/tds-mobile';
import ProfilePage from './pages/ProfilePage';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <ThemeProvider>
      <ProfilePage />
    </ThemeProvider>
  </StrictMode>
);

이렇게 세팅하니 되긴 하는데 css변수같은게 세팅이 안 됐는지 컴포넌트에 있는 css 설정에

background: var(--adaptiveYellow400);

이렇게 있으면 “–adaptiveYellow400이 정의되지 않음” 이런 식으로 나옵니다. 초기세팅 관련 도움을 좀 받을 수 있을까요? WebView입니다.