Some div are created automatically in react - reactjs

Question

I have a react code like below
<div className="grid-container">
<header>
<Header />
</header>
<main>
{(userInfo?.isAdmin === false || !userInfo) &&
location.pathname === '/' && <Carousel />}
<div className={userInfo?.isAdmin ? 'row stretch left' : 'row'}>
{userInfo?.isAdmin && <Sidebar listItems={listItems} />}
<Content />
</div>
</main>
<footer className="row center">All rights reserved.</footer>
</div>
Output
In that screenshot, some div are created automatically. In component , There is no such a div in between sidebar class and row class. But I don't Know how it comes. Please help me..
Sidebar component:
export default function Sidebar(props) {
const items = props.listItems;
const location = useLocation();
return (
<ul className="sidebar">
{items.map((list) => (
<li key={list.link} className={`sidebar__item`}>
<Link
to={`/${list.link}`}
className={`sidebar__link ${
location.pathname === '/' && list.link === 'dashboard'
? 'active__link'
: location.pathname === '/' + list.link
? 'active__link'
: ''
}`}
>
{list.name === 'Dashboard' ? (
<ColumnsGap className="sidebar__icon" />
) : list.name === 'Products' ? (
<BoxSeam className="sidebar__icon" />
) : list.name === 'Orders' ? (
<BagCheck className="sidebar__icon" />
) : list.name === 'UsersList' ? (
<People className="sidebar__icon" />
) : (
''
)}
{list.name}
</Link>
</li>
))}
</ul>
);
}
Content Component:
export default function Content() {
const userSignin = useSelector((state) => state.userSignin);
const { userInfo } = userSignin;
return (
<>
<Route path="/product/:id" exact component={ProductScreen}></Route>
<Route path="/cart/:id?" exact component={CartScreen}></Route>
</>
);
}
ProductScreen:
export default function ProductScreen(props) {
return (
<>
{loading ? (
<LoadingBox></LoadingBox>
) : error ? (
<MessageBox>{error}</MessageBox>
) : (
<div className="">
<div className="row">
<div className="col-3">
<div className="col-1">Image</div>
<div className="col-1">Image Details</div>
</div>
<div className="col-1">
</div>
</div>
</div>)
}
Cart Component:
export default function CartScreen(props) {
return (
<div>
<h1 className="mb-1">Shopping Cart</h1>
<div className="row top">
<div className="col-2">
</div>
</div>
</div>)
}
Like above all components are enclosed with div tag or empty tag.But there are more empty div tag are produced automatically.