장바구니(카트를) 소비자가 보는 화면에 계속 고정시키기

안녕하세요 코딩애플님 ㅎㅎ

다름이 아니라 제가 장바구니 페이지를 따로 만들지 말고 (마치 음식점에서 모바일로 주문하듯이)... 메인 페이지에 여러가지 상품을 나열하고 (예를들어) 카트추가 버튼을 누르면 화면 상단에 추가된 상품들을 띄워놓고 싶습니다.

이게 말로하려니 어려워서 대충 알고리즘을 말씀드리자면:
1. 데이터(이미지, 상품명, 가격 등)를 App.js로 가져온다
2. App.js로 가져온 데이터를 useState로 저장 후 Item.js에 보낸다 --> 상품들이 웹페이지에 보임(업로드 됨)
3. (여기가 문제) 나열된 상품들 중 원하는 상품을 클릭하면 그 상품에 대한 정보를 Cart로 보낸다. 
4. Cart를 모바일/모니터 상단에 고정시킨다. (이건 css를 통해서 할 수 있을것 같습니다.)

제가 해보고 싶은것은 리덕스를 사용하지 않고 props만으로 해보려하는데 이게 데이터가 너무 왔다갔다 하니 어떻게 설정해야할지 막막합니다. 혹시 위와 같이 선택한 데이터를 이곳 저곳으로 옮겨야 할 때 어떤 식으로 하면 좋을지 알 수 있을까요...?

(위 그림은 하드코딩으로 설정한것입니다.)