Unable to use axios post request response outside of function

Using React & Axios. My post request response is an array of arrays, the second element of nested array is string I am trying to load onto a div through using map. Error is ‘undefined is not iterable’ I am trying to use useState to use the array outside of post request. The entire section opens with useState via a button and by default is closed/not loaded. There is also a user input which the post request uses to get it data, all of that works fine. I am just unable to map the string from the array into a div. I tried to use window.var to access it but this was unsuccessful as well. Appreciate any help!

p.s pity the comments arent loaded because they explain whats going on for each function.

import './Turnersdiscoverybody.css'
import axios from 'axios'
import { useState, useEffect } from 'react';
import React, { Component } from 'react'
import Turnershomenav from "../../../components/homepage/homepage-components/Turnershomenav.js";
import orangegtr1 from './turnersdiscovery-images/orangegtr-1.jpg'
import searchicon from './turnersdiscovery-images/searchicon.png'
export default function Turnersdiscoverybody() {


    const [showSearchForm, setShowSearchForm] = useState('noForm')
    const [input, setInput] = useState['']
    //functions for opening and closing search feature

    const handleClick = () => {
        setShowSearchForm('showForm')
    }
    const handleClickBack = () => {
        setShowSearchForm('noForm')
    }


    //axios post request starts

    //function that handles searching the documents with the user input, using axios

    const handleSearch = (e) => {
        let userQuery = document.getElementById('userInput').value

        e.preventDefault()
        axios.post(`http://localhost:8081/getDocumentdata/${userQuery}`)
            .then(res => {
                setInput(res.data)
                console.log(res.data)
            })

    }


    //axios post request ends

    return (
        <div>
            <div className="turnersdiscoverynav">
                <Turnershomenav />
            </div>
            <div className='backgroundimg-container'>
                <img src={orangegtr1} alt="background-img" className='turnersdiscovery-backgroundimg'></img>
            </div>
            {showSearchForm === 'showForm' &&
                <>
                    <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClickBack}></img>
                    <div className='form-search-container'>
                        <div className='form-search-container-top'>
                            <input
                                id="userInput"
                                required
                                type="text"
                                placeholder='enter your query'
                            ></input>
                            <button onClick={handleSearch}>hello click me for stuff</button>
                        </div>

                        <div className='form-search-container-bottom'>
                            <div className='form-search-container-bottom-content'>
                                {input.map((data) => (
                                    <div>{data[1]}</div>
                                )
                                )}
                            </div>
                        </div>

                    </div>
                </>
            }
            {showSearchForm === "noForm" && <img className="img-btn-search" alt="search icon" src={searchicon} onClick={handleClick}></img>}
        </div>
    )
}