라우터 내용물을 컴포넌트로 뺄때,

<Routes>
<Route
path="/"
element={
<div>
<div className="container">
<div className="row">
{product.map((a, i) => {
return <Products product={product[i]} i={i} />;
})}
</div>
</div>
</div>
}
/>
</Routes>

이 안의 내용을 컴포넌트로 뺀다고했을때, 

저 안의 내용이 근데 컴포넌트로 쓰였는데, 저 컴포넌트는 props를 받아서 사용하는 컴포넌트인데 이걸 또 컴포넌트로 받을수가 있나요?

어떤식으로 접근을 해야할까요?