Function returning undefined

I have a function that calls an API and returns some data:

async function getDataAxios(){
        await axios.get("http://localhost:8080/cards/1").then(response => {
                console.log("RESP: ", response.data[0])
                return response
            })
            .catch(err => {
            console.log("Error: ", err)
            return err
        })
}

When I log response.data[0] inside getDataAxios() the expected data is present.
But when I try and return the data to my calling function and log the return data it logs undefined:

getDataAxios().then(r => console.log(r))

I have also tried the following:

 const resp = getDataAxios().then(resp => console.log("Data 2: ", resp)).catch(
    err => {
        console.log("An error has occurred: ", err)
        return err;
    }
  )
    console.log(resp)

Full code:

function App() {
    getDataAxios().then(r => console.log(r))
}

async function getDataAxios(){
        await axios.get("http://localhost:8080/cards/1").then(response => {
                console.log("RESP: ", response.data[0])
                return response
            })
            .catch(err => {
            console.log("Error: ", err)
            return err
        })
}

export default App;