javascript:React中圖像的src引數的變數名

如何在React jsx imgage標簽中定義src引數？ 我對映了一个陣列，我需要根据陣列的索引定義src引數。

import leaf1 from "../../assets/menu-clip/leafes/leaf1.png";
import leaf2 from "../../assets/menu-clip/leafes/leaf2.png";
import leaf3 from "../../assets/menu-clip/leafes/leaf3.png";
import leaf4 from "../../assets/menu-clip/leafes/leaf4.png";
import leaf5 from "../../assets/menu-clip/leafes/leaf5.png";
export default function Menu(props) {
    const menuList = props.menu.menuList;
    return (
        <div className={styles.menuContainer}>
            <ul className={styles.list}>
                {menuList.map( (m,i) => (
                    <li className={styles.menuLi}
                        key={i}>
                        {m.name}
                        <img src={  **leaf + (i+1)** }      // ???????
                             alt="menu lístok"
                             width="50"/>
                    </li>
                )
                )}
            </ul>
        </div>
    )
}