Show Input Fields Values On a Button s onClick in React

Question

I've made a simple resume portal. What I want is to get all the inputs values displayed on a screen on submit. This all should be done when button(Generate CV) is clicked.

Here's my code below:

Child component ( src -> Routes -> UserForm -> Components -> UserDetails -> index.js )

    import React from 'react'
    import './style.scss';
    import { Row, Col } from 'react-bootstrap'

    const UserDetails = (props) => {
        const { wrkExpTxtArea, AcQuTxtArea, clickToAdd, clickToRmv, addAcQuTxtArea, rmvAcQuTxtArea } = props
        return (
            <>
                <div className='UserDetails'>
                    <Row>
                        <Col lg='6'>
                            <div className='persnlInfo'>
                                <h4>
                                    Personal Information
                                </h4>
                                <p>Your Name</p>
                                <input type="text" placeholder="Enter here" />
                                <p>Your Contact</p>
                                <input type="text" placeholder="Enter here" />
                                <p>Your Address</p>
                                <textarea className='formAddress' rows="5" cols="10" placeholder="Enter here" />
                                <p id='impLinks'>Important Links</p>
                                <p>Facebook</p>
                                <input type="text" placeholder="Enter here" />
                                <p>Instagram</p>
                                <input type="text" placeholder="Enter here" />
                                <p>Linkedin</p>
                                <input type="text" placeholder="Enter here" />
                            </div>
                        </Col>

                        <Col lg='6'>
                            <h4>
                                Professional Information
                            </h4>
                            <p>Objective</p>
                            <textarea className='formObjective' rows="5" cols="10" placeholder="Enter here" />

                            <p>Work Experience</p>
                            {wrkExpTxtArea.map(item => (
                                <textarea className='formWrkExp' value={item.value} rows="3" cols="10" placeholder="Enter here" />
                            ))}
                            <div className='Button' >
                                <input type='button' value='Add' onClick={clickToAdd} />
                                <input type='button' value='Remove' onClick={clickToRmv} />
                            </div>

                            <p id='AcQu'>Academic Qualification</p>
                            {AcQuTxtArea.map(item => (
                                <textarea className='formAcQu' value={item.value} rows="3" cols="10" placeholder="Enter here" />
                            ))}
                            <div className='Button' >
                                <input type='button' value='Add' onClick={addAcQuTxtArea} />
                                <input type='button' value='Remove' onClick={rmvAcQuTxtArea} />
                            </div>
                        </Col>
                        <Row>
                            <div className='sbmtButton'>
                                <input type='button' value='Generate CV' />
                            </div>
                        </Row>
                    </Row>
                </div>
            </>
        )
    }
    export default UserDetails;

Parent component ( src -> Routes -> UserForm -> index.js )

    import React from "react";
    import Pages from "../../Components/HOC/Page/index";
    import UserDetails from "../UserForm/Components/UserDetails/index";

    class UserForm extends React.Component {
      state = {
        wrkExpTxtArea: [{ text: "" }],
        AcQuTxtArea: [{ text: "" }]
      };
      addTextArea = () => {
        let updatedTextArea = [...this.state.wrkExpTxtArea];
        updatedTextArea.push({ text: "" });
        this.setState({ wrkExpTxtArea: updatedTextArea });
      };
      rmvTextArea = () => {
        let updatedTextArea = [...this.state.wrkExpTxtArea];
        if (updatedTextArea.length > 1) {
          updatedTextArea.pop({ text: "" });
        }
        this.setState({ wrkExpTxtArea: updatedTextArea });
      };
      addAcQuTextArea = () => {
        let updatedTextArea = [...this.state.AcQuTxtArea];
        updatedTextArea.push({ text: "" });
        this.setState({ AcQuTxtArea: updatedTextArea });
      };
      rmvAcQuTextArea = () => {
        let updatedTextArea = [...this.state.AcQuTxtArea];
        if (updatedTextArea.length > 1) {
          updatedTextArea.pop({ text: "" });
        }
        this.setState({ AcQuTxtArea: updatedTextArea });
      };
      render() {
        return (
          <>
            <Pages showHeader showFooter>
              <UserDetails wrkExpTxtArea={this.state.wrkExpTxtArea} clickToAdd={this.addTextArea} clickToRmv={this.rmvTextArea}
              AcQuTxtArea={this.state.AcQuTxtArea} addAcQuTxtArea={this.addAcQuTextArea} rmvAcQuTxtArea={this.rmvAcQuTextArea} />
            </Pages>
          </>
        );
      }
    }

    export default UserForm;

I'm new to programming and getting values of user inputs seems insanely complicated to me. I'm little aware that this can be achieved using state , props etc. But I really have no idea about Where and What code is to place. Thanks in advance.