React paradigm: props vs useImperativeHandle

I was discussing with one of my team members about the design pattern for React components. I am a little perplexed about whether we should use props to pass down what we need or encapsulate the component and expose interfaces externally (more like an OOP concept). Here is the StackBlitz demo. If someone could give some advice or share any articles/documents online, that will be really appreciated. https://stackblitz.com/edit/stackblitz-starters-j6pvsq?file=src%2FApp.tsx

I have both approaches implemented in the StackBlitz. Please refer to that.