React Queryで取得したデータをmapメソッドでブラウザに表示したい

Question

前提・実現したいこと

PHP(Laravel)とJS(React)で簡単なSPA開発を行なっています
そこで、react-queryでデータを取得して、mapメソッドでブラウザに取得したデータを表示したいのですがうまくいきません、、、
どこが問題なのかを伺いたく、質問させていただきました。

発生している問題・エラーメッセージ

エラーは出ていないが、取得したデータがブラウザに反映されない

該当のソースコード

import React, {useEffect, useState} from "react";
import axios from "axios";
import { useQuery } from "react-query";

const TaskPage = () => {
    const {data:tasks, status} = useQuery('tasks', async () => {
            const {data}  = await axios.get('api/tasks');
            console.log(data)
            return data
    })

    if (status === 'loading') {
        return <div className='loader' />
    } else if (status === 'error') {
        return <div className='align-center'>データの読み込みに失敗しました</div>
    } else if(!tasks || tasks.length <= 0){
        return <div className="align-center">登録されたタスクはありません</div>
    }

    return (
        <>
            <form className="input-form">
                <div className="inner">
                    <input type="text" className="input" placeholder="TODOを入力してください。" defaultValue="" />
                    <button className="btn is-primary">追加</button>
                </div>
            </form>
            <div className="inner">
                <ul className="task-list">
                    {tasks.map(task => {
                        <li key={task.id}>
                            <label className="checkbox-label">
                                <input type="checkbox" className="checkbox-input" />
                            </label>
                            <div><span>{ task.title }</span></div>
                            <button className="btn is-delete">削除</button>
                        </li>
                    })}
                    <li>
                        <label className="checkbox-label">
                            <input type="checkbox" className="checkbox-input" />
                        </label>
                        <form><input type="text" className="input" defaultValue="編集中のTODO" /></form>
                        <button className="btn">更新</button>
                    </li>
                    <li className="done">
                        <label className="checkbox-label">
                            <input type="checkbox" className="checkbox-input" />
                        </label>
                        <div><span>実行したTODO</span></div>
                        <button className="btn is-delete">削除</button>
                    </li>
                    <li>
                        <label className="checkbox-label">
                            <input type="checkbox" className="checkbox-input" />
                        </label>
                        <div><span>ゴミ捨て</span></div>
                        <button className="btn is-delete">削除</button>
                    </li>
                    <li>
                        <label className="checkbox-label">
                            <input type="checkbox" className="checkbox-input" />
                        </label>
                        <div><span>掃除</span></div>
                        <button className="btn is-delete">削除</button>
                    </li>
                </ul>
            </div>
        </>
    )
}

export default TaskPage;

試したこと

react-queryに関して自分なりに検索をかけた。
mapメソッド、react-queryに記述間違いがないか確かめた。
データが取得できているか確かめた。

補足情報（FW/ツールのバージョンなど）

React 17.0
PHP 7.3
Laravel　8.54

Answer 1

                    {tasks.map(task => {
                        <li key={task.id}>
                            <label className="checkbox-label">
                                <input type="checkbox" className="checkbox-input" />
                            </label>
                            <div><span>{ task.title }</span></div>
                            <button className="btn is-delete">削除</button>
                        </li>
                    })}

task => のあとのカッコは丸括弧にしてください。中括弧のままだと、「JSXを作るだけ作って値を捨てる」という意味になってしまいます。