LaravelとReact(axios)を使用してMysqlのデータをreactで表示させたいです

laravelとreactを使ってmysqlの一覧データを表示したいのですが

・app.js:5520 Uncaught TypeError: tasks.map is not a function
・The above error occurred in the <Example> component:
・ncaught (in promise) TypeError: tasks.map is not a function

と3つのエラーが起きます

EXample.js

import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

function Example() {

    const [ tasks, setTasks ] = useState([]);

    const getTasks = async() => {
        const { data } = await axios.get('api/hello');
        console.log(data);
        setTasks(data);
    }

    useEffect(() => {
        getTasks()
    });

    return(
        <>
            {
                tasks.map((task,index)=><li key={index}>{task}</li>)
            }
        </>
    )

}

export default Example;

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::get('/hello','App\Http\Controllers\HelloController@index');

HelloController.php

<?php

namespace App\Http\Controllers;

use App\Models\Hello;
use Illuminate\Http\Request;

class HelloController extends Controller
{
    public function index(){

        $hellos = Hello::all();

        $data = [
            'msg' => 'This is React aplication',
            'hello' => $hellos
        ];

        // return view('index',$data);
        return response()->json($data,200);

    }

    public function index_react(){

        return view('index');

    }
}