React component not getting rendered properly

I'm trying to create a React app where I have two components:

1. (placed on the left)
2. (should take the remaining space on the right)

I want to use Flexbox to align both components horizontally, but for some reason:A. Sidebar appears, but Main is not rendering correctlyB. Flexbox styles don’t seem to applyWhy is my component not rendering properly, and how can I correctly use Flexbox to align these components side by side?CODE SNIPPETS:

1. Main.jsx

import React from 'react'import './Main.css'const Main = () => {  return (<div>        hello world</div>  )}export default  Main 

2. App.jsx

import React from 'react'import Sidebar from './components/Sidebar'import Main from './components/Main'import Special from './components/special'const App = () => {  return (<><div className='star'><Main/><Sidebar/><Special/></div></>  )}export default App

3. index.css

*{  padding: 0;  margin: 0;  box-sizing: border-box;  font-family: serif;}body{  min-height: 100vh;  display: flex;}