Install NextUI in React with Typescript

npm create vite@latest

yarn create vite

 Project name:  react-nextui Select a framework:  react? Select a variant:  - Use arrow-keys. Return to submit.  react  react-ts

cd react-nextuinpm installnpm run dev 

yarn add @nextui-org/react# ornpm i @nextui-org/react

import React from 'react';import ReactDOM from 'react-dom/client';import App from './App';import './index.css';import { NextUIProvider } from '@nextui-org/react';ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(  <React.StrictMode>    <NextUIProvider>      <App />    </NextUIProvider>  </React.StrictMode>);

import { useState } from 'react';import reactLogo from './assets/react.svg';import './App.css';import { Button } from '@nextui-org/react';function App() {  const [count, setCount] = useState(0);  return (    <div className="App">      <div>        <a href="https://vitejs.dev" target="_blank">          <img src="/vite.svg" className="logo" alt="Vite logo" />        </a>        <a href="https://reactjs.org" target="_blank">          <img src={reactLogo} className="logo react" alt="React logo" />        </a>      </div>      <h1>Vite + React + NextUI</h1>      <div className="card">        <button onClick={() => setCount((count) => count + 1)}>          count is {count}        </button>        <p>          Edit <code>src/App.tsx</code> and save to test HMR        </p>        <Button>Next UI Button</Button>      </div>      <p className="read-the-docs">        Click on the Vite and React logos to learn more      </p>    </div>  );}export default App;