Export data as csv with using react-csv

I tried to export csv file with using data which coming from axios post request.

I am using react-csv but there is a problem when using it with hooks because of lack of information.

import 'date-fns';
import React, { useRef ,useEffect} from 'react';
import Grid from '@material-ui/core/Grid';
import DateFnsUtils from '@date-io/date-fns';
import {
    MuiPickersUtilsProvider,
    KeyboardTimePicker,
    KeyboardDatePicker,
} from '@material-ui/pickers';
import Button from '@material-ui/core/Button';
import { CSVLink, CSVDownload } from "react-csv";
import axios from 'axios';
const API_ENDPOINT = process.env.API_URL || 'http://localhost:5000';

export default function MaterialUIPickers() {
    // The first commit of Material-UI
    const [selectedDateS, selectedDateStart] = React.useState(new Date('2021-01-01T00:00:00'));
    const [selectedDateE, selectedDateEnd] = React.useState(new Date('2021-01-01T00:00:00'));

    const [csvData, setcsvData] = React.useState("")
    const [resp, setResp] = React.useState("")

    const handleDateChangeStart = (date) => {
        selectedDateStart(date);
    };
    const handleDateChangeEnd = (date) => {
        selectedDateEnd(date);
    };

    const styles = { color: "#fff" };
    const csvLinkEl = React.createRef();
    
    function createCSV() {
        axios.post(`${API_ENDPOINT}/getcsv`, { start: selectedDateS, end: selectedDateE })
            .then(response => {
                console.log(response)
                setcsvData(response)
            })
        return csvData
    }

    function getUserList() {
        axios.post(`${API_ENDPOINT}/getcsv`, { start: selectedDateS, end: selectedDateE })
            .then(response => {
                setResp(response)
            })
    }

    async function downloadReport()
    {
     await getUserList();
     setTimeout(() => {
        csvLinkEl.current.link.click();
    });
    }

    return (

        <MuiPickersUtilsProvider utils={DateFnsUtils}>
            <Grid container justify="space-around">
                <KeyboardDatePicker
                    InputLabelProps={{
                        style: { color: '#fff' },
                    }}
                    disableToolbar
                    variant="inline"
                    format="MM/dd/yyyy"
                    margin="normal"
                    id="date-picker-inline"
                    label="Başlangıç tarihi"
                    value={selectedDateS}
                    onChange={handleDateChangeStart}
                    KeyboardButtonProps={{
                        'aria-label': 'change date',
                    }}

                />
                <KeyboardDatePicker
                    margin="normal"
                    id="date-picker-dialog"
                    label="Bitiş tarihi"
                    format="MM/dd/yyyy"
                    value={selectedDateE}
                    onChange={handleDateChangeEnd}
                    KeyboardButtonProps={{
                        'aria-label': 'change date',
                    }}
                    InputLabelProps={{
                        style: { color: '#fff' },
                    }}
                />

            </Grid>
            <Button onClick={downloadReport} variant="contained" color="primary">Export CSV </Button>
            <CSVLink
                filename="Data.csv"
                data={resp}
                ref={csvLinkEl}
            />
        </MuiPickersUtilsProvider>
    );
}

When I tried to onClick ExportCSV button, there is a data in downloaded csv file like . Also, app returns error TypeError: Data should be a "String", "Array of arrays" OR "Array of objects" like that.

Also data received from backend for axios.post is

const csvData = [
["firstname", "lastname", "email"],
["Ahmed", "Tomi", "[email protected]"],
["Raed", "Labes", "[email protected]"],
["Yezzi", "Min l3b", "[email protected]"]
];

What should I do? Thanks in advance for any help.