How can I get and store Data from Textfield in Form Container?

Question

I have this code below for a webtool to edit Twilio Queue information, I am having issues with passing data upwards from the different forms, how can I return or store the data to the Save (activated when I click the save button) function from the text fields with the following IDs (cap_percent_threshold, abandoned_target_threshold, asa_threshold, abandoned_percent_threshold).

import React, { useRef, Component } from 'react'
import MaterialTable from 'material-table'
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import axios from 'axios';

function FormRow(data) {
    const queue = data.data;
    const channels = queue.channels;
    const tresholdData = {};

    console.log('threshold data', tresholdData);

    return (
        channels.map((channel, index) => (<Grid container item sm={12} spacing={3} >
            <Grid item sm={2} >
                <TextField
                    autoFocus
                    margin="dense"
                    id="channel_name"
                    label="Channel"
                    type="text"
                    value={channel.friendly_name}
                    fullWidth
                    disabled
                />
            </Grid >


            <Grid item sm={2} >
                <TextField
                    autoFocus
                    margin="dense"
                    id="cap_percent_threshold"
                    label="Cap Percent Threshold"
                    value={channel.capPercentThreshold}
                    type="text"
                    fullWidth
                />
            </Grid >
            <Grid item sm={2} >
                <TextField
                    autoFocus
                    margin="dense"
                    id="abandoned_target_threshold"
                    label="Abandoned Target Threshold"
                    value={channel.abandonedTargetThreshold}
                    type="text"
                    fullWidth
                />
            </Grid >
            <Grid item sm={2} >
                <TextField
                    autoFocus
                    margin="dense"
                    id="asa_threshold"
                    label="ASA Threshold"
                    value={channel.aSAThreshold}
                    type="text"
                    fullWidth

                />
            </Grid >
            <Grid item sm={2} >
                <TextField
                    autoFocus
                    margin="dense"
                    id="abandoned_percent_threshold"
                    label="Abandoned Percent Threshold"
                    value={channel.abandonedPercentThreshold}
                    onChage={input => tresholdData += input}
                    type="text"
                    fullWidth
                />
            </Grid >
        </Grid >

            
        ))
    );
}

function FormContainer(data) {
    console.log('what');
    console.log(data);
    const queue = data;

    const cancel = () => {
        console.log('cancel');
    }

    const save = (event) => {



        console.log('save');
        console.log(': ', event);
        console.log('Data on save: ', data);

        const postURL = `https://taskrouter.twilio.com/v1/Workspaces/${workspaceSid}/TaskQueues/${testTaskQueue}`

        /*

        const updateTaskQueuePromise = axios.post(postURL, {
            apiKey: this.props.credentials().apiKey,
            apiSecret: this.props.credentials().apiSecret,

        }).then(result => {
            console.log('Result from Save Axios: ', result)

        }
        */



    }

    return (
        <div>
            <Grid container >
                <Grid item sm={1} ></Grid >
                <Grid container item sm={11} spacing={3} >
                    <FormRow data={queue} />
                </Grid>
                <Grid container
                    direction="row"
                    justify="flexend"
                    alignItems="center">
                    <Grid item sm={1} ></Grid >
                    <Grid item sm={11} spacing={3} justify="flexend" alignItems="center" >
                        <Button variant="outlined" onClick={cancel} color="secondary" > Cancel</Button >
                        <Button variant="outlined" onClick={save} color="primary" > Save</Button >
                    </Grid >
                </Grid >
            </Grid >
        </div >
    );
}

export default class Editor extends React.Component {
    constructor(props) {
        super(props);

        /*
            _handleTextFieldChange: function (e) {
                this.setState({
                    textFieldValue: e.target.value
                });
    
                */

        this.state = {
            open: false,
            queue: {},
            columns: [
                { title: 'Queue Name', field: 'friendly_name', editable: 'never' },
                { title: 'Channel', field: 'channel_friendly_name', editable: 'never' },
                { title: 'Cap Percent Threshold', field: 'capPercentThreshold', type: 'numeric' },
                { title: 'Abandoned Target Threshold', field: 'abandonedTargetThreshold', type: 'numeric' },
                { title: 'ASA Threshold', field: 'aSAThreshold', type: 'numeric' },
                { title: 'Abondended Percent Threshold', field: 'abandonedPercentThreshold', type: 'numeric' }
                //{ title: 'Reset Timezone', field: 'channel_reset_timezone' },
                //{ title: 'Reset Time', field: 'channel_reset_time' },
                // { title: 'Service Level Threshold', field: 'channel_service_level_threshold', type: 'numeric' },
                //{ title: 'Short Abandoned Threshold', field: 'channel_service_level_threshold', type: 'numeric' },
                //Added to Edit the color Changing Thresholds

            ]
        }
        this.handleClose = this.handleClose.bind(this);

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);




    }

    handleClose(xxx) {
        console.log('this happening');
        console.log(xxx);
        this.setState({ open: true });
    }


    handleChange(event) {
        this.setState({ textFieldValue: event.target.value });
    }

    handleSubmit(event) {
        alert('An essay was submitted: ' + this.state.value);
        event.preventDefault();
    }


    render() {
        console.log('Render this props.data!!');
        console.group(this.props.data);
        const queues = this.props.data.map(q => {
            const channel = q.channels.find(c => c.unique_name === 'voice');
            q.channel_friendly_name = channel.friendly_name;
            q.channel_reset_time = channel.reset_time;
            //q.channel_reset_timezone = channel.reset_timezone;
            //q.channel_service_level_threshold = channel.service_level_threshold;
            //Added To Edit the Color Changing Thresholds:
            q.channel_service_level_threshold = channel.capPercentThreshold;
            q.channel_service_level_threshold = channel.abandonedTargetThreshold;
            q.channel_service_level_threshold = channel.aSAThreshold;
            q.channel_service_level_threshold = channel.abandonedPercentThreshold;

            return q;
        })
        return (
            <div>
                <MaterialTable
                    title='Queue SLA'
                    columns={this.state.columns}
                    data={queues}
                    options={
                        {
                            pageSize: 25,
                            pageSizeOptions: [25, 100, 500, 1000]
                        }
                    }
                    detailPanel={
                        rowData => {
                            return FormContainer(rowData);
                        }
                    }
                />
            </div >
        );
    }
}