React keep state alive for remount

Question

I want to know if there is another propper solution for the problem I have. I want the state of a component to be kept alive when React remounts it to a different parent node. I am working with an array of components which is splitted into different parent nodes to render.

Lets say i got some data from an API, now i loop through the data and create a bunch of components to push into an array like this

for (const [index, task] of APIRESULT.entries()) {
 let item = <Task type={task['type']} value={task['value']}/>
 taskarray.push(item);
}

Task is a class component and in its constructor I set the state to

state = {
         type: props.type,
         value: props.value
        }

Now my parent component looks somewhat like this:

class Example extends React.Component{
    constructor(props){
        super(props)
        this.state = { 
            activeTasks: [],
            passiveTasks: [],
            allTasks: [],          
        };
    }

   componentDidMount(){
     let tasks = await getTasksFromApi();
     this.setState({
            allTasks = tasks,
            activeTasks: tasks.filter(item => item.props.type === 0),
            passiveTasks: tasks.filter(item => item.props.type === 1),
            })
   }
   rearrangeTasks(){
        this.setState({
            activeTasks: this.state.allTasks.filter(item => item.ref.current.state.type === 0),
            passiveTasks: this.state.allTasks.filter(item => item.ref.current.state.type === 1),
        })
    }
  render(){
   return(
    <div>
    <Child1 className="all-tasks-of-type-0">
     {this.state.passiveTasks}
    </Child1>
 
    <Child2 className="all-tasks-of-type-1">
     {this.state.activeTasks}
    </Child2>
    </div>  
    )
  }
}

(I left out the setting of the refs in this example if you wonder what i do filter in the rearrange function, but it works)

Now a "Task" is a component a User can interact with. The User sets a state.value = 3 to a state.type 0 (passive) component and then hits a button what sets the state.type of that component to 1, which makes it an active task and calls the rearrange() function in the Example component. React deletes the Component in Child1 and moves it to Child2 what couses it to mount again and take the props as a value for its state. So it is type 0 and value 0 again (but rendered in Child2 this time). But I want it to keep the state it had as it was in the Child1 parent.

My solution would be something like an state-array which stores the current state of a Task component in the "Example" parent node. On each mount of a Task, it would search in this state-array for its statevalue and if non existent take the props. Another solution might be to store the API dataarray and only set values in that array and loop through it on every change to get the props right. But it doesn't sound performant to me.

My question is if there is another, maybe more elegant solution or if my way to handle this case is completely wrong anyway. The examples are non productive code, sorry if there are typos, I'm new to React and didn't find any good hints how to solve this problem. Thanks in advance.

Edit.: Simplyfied Example right here: https://codesandbox.io/s/bold-proskuriakova-istmq7?file=/src/Tasks.js Red Squares jump to bottom div correctly onclick, but will be mounted with orig. props.type.