Rendering items on the page base on what the user will select from the select option

Question

I have build an app that uses react-papaparse to receive and parses the csv files. Now I want to create a function that receives certain column values and stored the only the specified columns based on what the user will choose in the select option

In the App js, I have creacted a function called getColumnsValues that receive the column head the user selected from the option and render the respective column values. App.js

import { useState,  } from 'react';
import ReadCSV from './Components/ParsingObj' //the comp that receives the parse file data
import SelectXY from './Components/SelecyXY'; //comp that render the data columns based on what the user select

export default function App() {
  const [colHeads, setColHeads] = useState([]); //storing the column heads
  const [csvData, setCsvData] = useState([]); //storing the data values expects the head
  const [values, setValues] = useState({
    xvalues: '',
    yvalues: '',
  }); //get the x and y values base on what the user select

  const getColumnValues = val => {
    return csvData.map(r => r[val]);
  }

  return (
    <section>
      <ReadCSV
        getColumns={setColHeads}
        getData={setCsvData}
      />

      <SelectXY 
        columns={colHeads}
        handleXYValues={handleXYValues}
        xyValues={values}
        getColumnValues={getColumnValues}
      />
    </section>
  );
}

SelectXY componet receives the x and y values from the select option and render the preferred x and y values. Child SelectXY.js

import PropTypes from "prop-types";

export default function SelectXY(props) {
    const {columns, xyValues, handleXYValues, getColumnValues} = props
    return(
       <article>
        <label 
            htmlFor="xvalues">
                Choose the x value:
        </label>
        <select 
            name="xvalues" 
            id="xvalues" 
            onChange={(e) => handleXYValues(e)}
            value={xyValues.xvalues}
        >
        <option value="" disabled>Select an option</option>
        {columns.map(xcol => (<option value={xcol} key={xcol}>{xcol}</option>))}
        </select>
        
        <label 
            htmlFor="yvalues">
                Choose the y value:
        </label>
        <select 
            name="yvalues" 
            id="yvalues" 
            onChange={(e) => handleXYValues(e)}
            value={xyValues.yvalues}
        >
        <option value="" disabled>Select an option</option>
        {columns.map(ycol => (<option value={ycol} key={ycol}>{ycol}</option>))}
         </select>

         {xyValues.xvalues && xyValues.yvalues && (
            <div>
                <h3>Selected X Column Values: </h3>
                <ul>
                    {getColumnValues(xyValues.xvalues).map((value, index) => (
                        <li key={index}>{value}</li>
                    ))}
                </ul>
                <h3>Selected Y Column Values:</h3>
                <ul>
                    {getColumnValues(xyValues.yvalues).map((value, index) => (
                        <li key={index}>{value}</li>
                    ))}
                </ul>
            </div>
         )}
       </article>
    );
}

SelectXY.propTypes = {
    columns: PropTypes.array,
    xyValues: PropTypes.any,
    handleXYValues: PropTypes.func,
    getColumnValues: PropTypes.func
};

Child ReadCSV.js

import { useState, } from "react";
import {useCSVReader, formatFileSize} from 'react-papaparse';
import styles from "./styles";
import PropTypes from "prop-types";
const DEFAULT_REMOVE_HOVER_COLOR = '#A01919';

export default function ReadCSV (props) {
  const { CSVReader } = useCSVReader();
  const [zoneHover, setZoneHover] = useState(false);
  const [removeHoverColor, setRemoveHoverColor] = useState(DEFAULT_REMOVE_HOVER_COLOR);
  const {getColumns, getData} = props;
  
  return (
    <CSVReader
      onUploadAccepted = {results => {
        const value = results.data;
        const filtered = value.filter((_, i) => i !== 0);
        getColumns(value[0]);
        getData(filtered);
      }}
        
      onDragOver={(event) => {
        event.preventDefault();
        setZoneHover(true);
      }}

      onDragLeave={(event) => {
        event.preventDefault();
        setZoneHover(false);
      }} 
    >
      {({
        getRootProps,
            acceptedFile,
            ProgressBar,
            getRemoveFileProps,
            Remove,
        }) => (
            <>
            <div
              {...getRootProps()}
              style={Object.assign(
                {},
                styles.zone,
                zoneHover && styles.zoneHover
              )}
            >
              {acceptedFile ? (
                <>
                  <div style={styles.file}>
                    <div style={styles.info}>
                      <span style={styles.size}>
                        {formatFileSize(acceptedFile.size)}
                      </span>
                      <span style={styles.name}>{acceptedFile.name}</span>
                    </div>
                    <div style={styles.progressBar}>
                    <ProgressBar />
                    </div>
                    <div
                      {...getRemoveFileProps()}
                      style={styles.remove}
                      onMouseOver={(event) => {
                        event.preventDefault();
                        setRemoveHoverColor(styles.REMOVE_HOVER_COLOR_LIGHT);
                      }}
                      onMouseOut={(event) => {
                        event.preventDefault();
                        setRemoveHoverColor(DEFAULT_REMOVE_HOVER_COLOR);
                      }}
                    >
                      <Remove color={removeHoverColor} />
                    </div>
                  </div>
                </>
              ) : (
                'Drop CSV file here or click to upload'
              )}
            </div>
          </>
          )}
        </CSVReader>
      );
}

ReadCSV.propTypes = {
  getColumns: PropTypes.func.isRequired,
  getData: PropTypes.func.isRequired
}

I tried to use imperative code but I'm stuck with the process

    for(let i = 0; i < csvData.length; i++) {
      for (let j = 0; j < csvData.length; j++) {
         console.log(csvData[i][j]);
      }
    }

I also tries ES6 map function but to no avail

   const getColumnValues = val => {
    return csvData.map(r => r[val]);
  }