'React derived stage for debounced props

What is the best architectural pattern for the following

Component A has props (from getServerSideProps) that it passes to its child Component B as props
Component B is a multi-input that combines all user input into a single state and emits it to its parent Component A with debouncing. The same state is derived from props with getDerivedStateFromProps, any props change will override everything collected in state.

The only reason for a derived state to exist is to separate "realtime" internal data from the debounced parent's data.

Yet react's blog highlights this as an anti-pattern in multiple posts.

So what is the correct pattern for this?

reactjs input debouncing

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Solution	Source