Im trying to learn more about react best practices like SOLID principle. Im now truggeling to understand where is the best place to put my logic of a component.

Lets say that I have a simple TODO app. So my folders would contain:

• ToDoListContainer: There I would put mapping over fetched tasks with hook that actually fetched the tasks from backend.
• ToDoCard: In this file I would put smaller parts of UI for each individual task.
• ToDoTitle: Simple presentational component that just displays and style title of the task that will be visible and used in ToDoCard.
• ToDoButton: Button component to handle tasks actions also used in the ToDoCard.

I would also create custom hooks to make the code even more readable and cleaner. In this custom hook, there could be actions to manipulate the task such as update function that displays dialog, remove function, etc.

Now where should I use this custom hook? My idea was to use it in the ToDoListContainer and pass each function from the custom hook to the ToDoCard as a props. But then I would need to also pass it into the smaller parts of the ToDoCard like ToDoTitle and ToDoButton which in this case is passing props over component (ToDoCard) that doesnt needs it. Also it seems like a start of prop drilling.

So my question is how should I handle this situation?
Im trying to understand what is the best solution that can be also used in bigger apps (not only ToDo app, this was only an example).

Also should I create own custom hook for each action of the task like update – useUpdateTask, edit – useEditTask which each of these hooks handle the logic for each action and also will contain another hook that uses axios for CRUD operations or is it bad idea to use custom hook inside another custom hook?