Как мне реализовать динамический флажок в ReactJS?

Я делаю Discord Embed Builder, и пока все работает, как ожидалось, кроме флажка. Я хотел бы знать, как сделать динамический флажок в React, где для каждого поля он может быть выбран как встроенный или нет. Модуль, который я использую для отображения закладных, - встроенный визуализатор.

По сути, я сделал так, чтобы входные данные можно было добавлять и удалять, нажимая кнопки добавления и удаления. Когда данные заголовка и значения введены во входные данные, они будут динамически добавляться к объекту встроенных полей.

Проблема, с которой я столкнулся, - это флажок, где в настоящее время он застрял на отмеченном (true) в ловушке useState, и я хочу, чтобы он делал для каждого добавленного поля, что он должен делать, это когда он отмечен, установите для параметра «inline» значение true или false, когда флажок снят.

Вот мой код:

const [inputList, setInputList] = useState([{ name: "Title", value: "Value", inline: true }]);

// handle input change
const handleInputChange = (e, index) => {
    const { name, value } = e.target;

    const list = [...inputList];

    list[index][name] = value;

    setInputList(list);
};

// handle click event of the Remove button
const handleRemoveClick = index => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list);
};

// handle click event of the Add button
const handleAddClick = () => {
    setInputList([...inputList, { name: "Title", value: "Value", inline: true }]);
};

let embed = {
    embed: {
        fields: inputList
    }
};

return (
    <div>

        <label className = "form-label"><span className = "text-danger">*</span> Fields</label>
        <MDBRow>
            {inputList.map((x, i) => {
                return (
                    <MDBCol size = "sm">
                        <div style = {{ paddingBottom: "5px" }}>
                            <input className = "form-control" name = "name" placeholder = "Field Name" value = {x.name} onChange = {e => handleInputChange(e, i)} />
                        </div>
                        <div style = {{ paddingBottom: "5px" }}>
                            <input className = "form-control" name = "value" placeholder = "Field Value" value = {x.value} onChange = {e => handleInputChange(e, i)} />
                        </div>
                        <div className = "custom-control custom-checkbox">
                            <input type = "checkbox" className = "custom-control-input" name = "inline" checked = {x.inline} onChange = {e => handleInputChange(e, i)} />
                            <label className = "custom-control-label">Inline</label>
                        </div>
                        <div className = "btn-box">
                            {inputList.length - 1 === i && <button className = "btn btn-success btn-sm" onClick = {handleAddClick}>Add</button>}
                            {inputList.length !== 1 && <button className = "btn btn-danger btn-sm" onClick = {() => handleRemoveClick(i)}>Remove</button>}
                        </div>
                    </MDBCol>
                );
            })}
        </MDBRow>
        <br></br>
    </div>

);