Need help to setup/shape a new project - reactjs

Question

we are creating a new react project using create-react-apps and we are trying to figure out a way to organise our page components. After some discussion, we basically have come up with 2 solutions
the first solution is to use hierarchical structure as shown below
src/
├── copmonents/
│ ├── sharedComponent1
│ ├── sharedComponent2
│ ├── sharedComponent3
| └── sharedComponent4
├── pages/
│ ├── page1/
│ | ├── component1/
│ | | ├── component11/
│ | | | ├── component111
│ | | | └── component112
│ | | └── component12
│ | └── component12
│ ├── page2 (same as above)
│ └── page3 (same as above)
└── utils/
We create pages and put components inside them. Once we find a component is used in multiple places, we hoist it into the component folder.
Idea behind is to use file hierarchy to reflect component structure. We fell developers might find it easier to locate files using this solution, but drawback would be it can easily go too deep?
the second solution is to use a 'flat' structure
src/
├── copmonents/
│ ├── component1
│ ├── component2
│ ├── component3
│ ├── component4
│ ├── component5
│ ├── component6
│ ├── component7
│ ├── component8
│ ├── component9
| └── component10
├── pages/
│ ├── page1.tsx
│ ├── page2.tsx
| └── page3.tsx
└── utils/
this way we have a very lean page folder and keep all components into a components folder. While this structure seems to be cleaner than the first one, I do agree that some people may feel this solution "less organised" as all components are dumped into a centralised place.
I do recognise this is a highly opinionated topic and I was thinking of using json normaliser as an analogy, but people even have different opinions in normalizing json.
thoughts?

Answer 1

Move files around until it feels right ref
Dan Abramov’s site
But, you can aboard it strategically with features (layout, Button, basket)
src/
├── copmonents/
│ ├── Layout
│ ├── Basket
│ ├── Button
| └── Feature specific
├── pages/
│ ├── page1/
│ | ├── index.ts/js/
│ | ├── logic.tsx
│ | └── ui-specific-to-page
│ ├── page2 (same as above)
│
└ hooks

Answer 2

one point that I missed in my initial post(I only discovered it yesterday), with the hierarchical code structure, we will end up with long referrence paths like ../../../../utils inside your components (imagine you are referring to a utils function inside component111 or it's sub components). While with the flat structure we don't have this type of issues.
there are ways to get around with it, like a custom resolve for webpack, but it may involve some effort to set it up (especially when your project is bootstrapped by cra)
src/
├── copmonents/
│ ├── sharedComponent1
│ ├── sharedComponent2
│ ├── sharedComponent3
| └── sharedComponent4
├── pages/
│ ├── page1/
│ | ├── component1/
│ | | ├── component11/
│ | | | ├── component111
│ | | | └── component112
│ | | └── component12
│ | └── component12
│ ├── page2 (same as above)
│ └── page3 (same as above)
└── utils/