Datalist选项溢出在选项标记中的文本时溢出下拉列表

如何解决Datalist选项溢出在选项标记中的文本时溢出下拉列表

我有一个问题，其中 datalist 选项“溢出”下拉列表，并且当标签中有内容时，列表总是以纯文本形式显示（见下图），例如下面有 {d.projectName}

return (
    <div className="col s12">
        <h1>Game Id</h1>
        
        {gameIds && 
            <div>
                <form style={{height: "200px"}} onSubmit={handleGameIdSelection}>
                <input list="gamesessions" type="text"></input>
                <button className="waves-effect waves-light btn" type="submit">Get game data</button>
                <datalist id="gamesessions" style={{display: "block"}} >
                    {gameIds.map(d => (
                        <option value={d.gameId}>{d.projectName}</option>
                    ))}
                </datalist>
                
                </form>
            </div>}
    </div>
)

在仍然使用 datalist 并显示 d.projectName 而不更改值的同时，有没有办法避免这种情况？