Ant Design動態數據不綁定到Select

我正在使用react進行一個學校項目。動態數據不綁定到Ant設計reactjs中的選項。結果是一個空選項列表。實際上，數據來自外部API。出于測試目的，我將數據指定為狀態變量。數據以2D數組的形式出現，所以我在數據中映射了兩次。

Result is:

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
    const [list, setPersons] = useState([
        [
            {
                id: 1,
                personName: "Owan",
            },
            {
                id: 2,
                personName: "More",
            },
            {
                id: 3,
                personName: "Jaila",
            },
            {
                id: 4,
                personName: "Eerov",
            },
        ],
        [
            {
                id: 5,
                personName: "Rell",
            },
            {
                id: 6,
                personName: "Juko",
            }
        ]
    ]);


    

    useEffect(() => {
        console.log(list);
    }, []);

    return (
        <Select
            showSearch
            style={{ width: 200 }}
            placeholder="Select a person"
            optionFilterProp="children"
            
            filterOption={(input, option) =>
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {list.map((l) => {

                l.map((person) => {
                    console.log(person);
                    <Option value={person.id}>
                        {person.personName}
                    </Option>;
                });
            })}
        </Select>
    );
};

export default Complete;