Passing a new array for each component?

Question

JavaScript

Good evening! Some time ago I started learning React, and at the same time I decided to make a couple of projects to consolidate my skills. I am currently writing something like a trello clone.
This is what the interface looks like without CSS.
The problem is this:
I have a component that creates tasks. Inside these tasks, I create some mini-tasks.
It works like this:
I have an array that I fill with input values. Thus, I create a task with the name that I entered in the field. However, when I implemented mini-tasks, the ENTIRE array began to fall into them and spread to top-level components, that is, ordinary tasks. (For example, on the screen, I only wrote 1 time date (14:00), and it was displayed in all the tasks I created.
Actually, I decided to write here in order to get advice on how to fix this.
From personal ideas, I can only assume that raising the state can help, but I have not once or twice re-read the article on this topic in offline documentation and just got confused.
Source:

import React,{Component} from 'react'
import Form from "react-bootstrap/Form";
import Card from "react-bootstrap/Card";
import FormCheckInput from "react-bootstrap/es/FormCheckInput";
import Button from "react-bootstrap/Button";
import WasCreatedTask from "./WasCreatedTask";



const arrayTitleTask=[]

class Shablon extends Component{
    state={
        startValue:"",
        copyValue:this.value
    }
    render(){

        const value=this.state.copyValue
        const fullTasks=arrayTitleTask.map(value=>
            <WasCreatedTask tasks={value}/>
        )
        return(

                <Card>
                    <Card.Title>
                        <h1>Create Your Tasks</h1>
                    </Card.Title>
                    <input onChange={this.handleChange} value={value}/>

                    <Button onClick={this.handleClick}>Submit</Button>
                    {fullTasks}
                </Card>




        )
    }
    handleChange=(event)=>{
        this.setState({
            startValue:event.target.value,
            copyValue:this.startValue,
            
        })
    }

   handleClick=()=>{
      this.setState({
       copyValue:"",
        startValue:""
      })
       if(this.state.startValue!==""){
           arrayTitleTask.push(this.state.startValue);
           console.log(arrayTitleTask)
       }



   }
}


export default Shablon

^The component that renders tasks.

import React,{Component} from 'react'
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
import FormCheckLabel from "react-bootstrap/es/FormCheckLabel";
import AddTaskList from "./AddTaskList";



const miniTasksArray=[]
class WasCreatedTask extends Component{
    state={
        startValue:"",
        copyValue:this.value
    }
    render(){

        const value=this.state.copyValue
        const label=miniTasksArray.map(value=>
            <AddTaskList addMiniTasks={value}/>
        )
        return(
            <Card>
                <Card.Title>
                    <h1> {this.props.tasks}</h1>
                </Card.Title>
                <input onChange={this.handleChange}value={value}/>
                <Card.Text>
                    {label}
                </Card.Text>
                <Button onClick={this.handleClick}>add event</Button>
            </Card>

        )
    }
    handleClick=()=>{
        this.setState({
            copyValue:"",
            startValue:""
        })
        miniTasksArray.push(this.state.startValue)

    }
    handleChange=(event)=>{
        this.setState({
            startValue:event.target.value,
            copyValue:this.startValue,
        })

    }
}

export default WasCreatedTask

^ The component that renders the mini-tasks (there is a problem in it, in my opinion)

import React,{Component} from 'react'
import FormCheckLabel from "react-bootstrap/es/FormCheckLabel";


class AddTaskList extends Component{
    render(){
        return(
            <h2> {this.props.addMiniTasks}</h2>
        )
    }
}



export default AddTaskList

^ A component that renders one mini task (after which I render everything in the WasCreatedTask component through the map function).
Maybe I'm confused, maybe I'm lazy, maybe I don't have enough knowledge, which is obvious. However, I still cannot solve the problem, therefore I turn to more experienced people for advice.
Thanks in advance

Answer 1

1. Remove the arrayTitleTask and miniTasksArray arrays. Work with component state.
2. Each titleTask must have its own miniTasks array .
3. Read about immutability and immutable state update.