How can I prevent the state data to be cleared when I change the active tab in React.js?

My tabs have a different child component. Firstly I open FirstTab and fill the input areas. Then I open SecondTab and fill their input areas.

Then, when I return FirstTab, the states data are cleared. How can I prevent clear my data?

My HomePage

import { React, Component } from 'react';
import Tabs, { Tab } from 'react-awesome-tabs';
import "../node_modules/react-awesome-tabs/dist/react-awesome-tabs.css"
import FirstTab from './FirstTab';
import SecondTab from './SecondTab';
export class Simple extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeTab: 0
        };
        this.tabs = [
            {
                title: 'Tab1',
                content: <FirstTab />
            },
            {
                title: 'Tab2',
                content: <SecondTab />
            },
        ];
    }
    tabs = [];
    handleTabSwitch(active) {
        this.setState({ activeTab: active });
    }
    render() {
        return (
            <div className="App" style={{
                height: '100%', width: '100%',
                backgroundPosition: 'center',
                backgroundRepeat: 'no-repeat',
                marginTop: '-0.5%',
                backgroundSize: 'cover',
                minHeight: '100%',
                position: 'absolute',
                flex: 1,
                opacity: 1
            }}>
                <Tabs
                    active={this.state.activeTab}
                    onTabSwitch={this.handleTabSwitch.bind(this)}
                    draggable={true}
                    showAdd={true}
                >
                    {
                        this.tabs.map((value, index) => {
                            return (
                                <Tab
                                    key={index}
                                    title={value.title}
                                    showClose={true}
                                >
                                    {value.content}
                                </Tab>
                            );
                        })
                    }
                </Tabs>
            </div>
        );
    }
}
export default (Simple)

My FirstTab

import React, { Component } from 'react';
class FirstTab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: "",
        };
    }
    ChangeName(e){
        this.setState({name: e.target.value})
    }
    render() {
       
        const labelStyle = {
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '15%',
            height: '20px',
            color: "black",
            float: "left",
            marginLeft: "5%",
            textAlign: "left",
            backgroundColor: "transparent",
            overflow: "hidden"
        }
        const inputStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const textareaStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const divStyle ={
            width: "50%", 
            float: "center",
             display: "block",
              margin:"auto",
              marginTop: "2%",
        }
        return (
            <div >
                <div style={divStyle}>
                    <label style={labelStyle} htmlFor='uyeNo' >Name: </label>
                    <input style={inputStyle} onBlur={(e)=>{this.ChangeName(e)}} type='text' />
                    <textarea style={textareaStyle}  value={this.state.name} />
                    <br></br>
                </div>
            </div>
        );
    }
}
export default (FirstTab)

My secondTab

import React, { Component } from 'react';
class SecondTab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            surName: "",
        };
    }
    ChangeName(e) {
        this.setState({ surName: e.target.value })
    }
    render() {
        const labelStyle = {
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '15%',
            height: '20px',
            color: "black",
            float: "left",
            marginLeft: "5%",
            textAlign: "left",
            backgroundColor: "transparent",
            overflow: "hidden"
        }
        const inputStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const textareaStyle = {
            boxShadow: '1px 1px 5px #aeaeae',
            borderWidth: '1px',
            borderColor: '#f0f0f0',
            borderRadius: 3,
            width: '35%',
            marginLeft: "5%",
            height: '20px',
            float: "left",
        }
        const divStyle = {
            width: "50%",
            float: "center",
            display: "block",
            margin: "auto",
            marginTop: "2%",
        }
        return (
            <div >
                <div style={divStyle}>
                    <label style={labelStyle} htmlFor='uyeNo' >Name: </label>
                    <input style={inputStyle} onBlur={(e) => { this.ChangeName(e) }} type='text' />
                    <textarea style={textareaStyle} value={this.state.surName} />
                    <br></br>
                </div>
            </div>
        );
    }
}
export default (SecondTab)

My real project has 35-40 inputs data every child component. Addition: If I prevent render in my child components when I second click on my tabs, maybe I can prevent that my states data re clearing.. But how can I prevent second rendering?