How to achieve multiple select in dynamic input form in react?

Question

Upload.js

import { v4 as uuidv4 } from 'uuid';
import { Form, Container, Row, Col, Button } from 'react-bootstrap';
const Upload = () => {
    const [inputFields, setInputFields] = useState([
        { id: uuidv4(), name: '', dialogueName: '', categories: [] },
    ]);
const cats=["cricket","football","kabaddi"]
    
    const handleSubmit = (e) => {
        e.preventDefault();
        console.log("InputFields", JSON.stringify(inputFields));
    };
    const handleChangeInput = (id, event) => {
        console.log(id, event.target.name, event.target.value)
        const newInputFields = inputFields.map(i => {
            if (id === i.id) {
                if (event.target.name != 'categories') {
                    i[event.target.name] = event.target.value
                }
                else {
                    let difference = i['categories'].findIndex(x => x == event.target.value);
                    console.log(difference, event.target.value, i['categories'])
                    if (difference == -1) { i['categories'].push(event.target.value) }
                }
            }
            return i;
        })

        setInputFields(newInputFields);
    }
    const handleAddFields = () => {
        setInputFields([...inputFields, { id: uuidv4(), name: '', dialogueName: '', categories: '' }])
    }
    const handleRemoveFields = id => {
        const values = [...inputFields];
        values.splice(values.findIndex(value => value.id === id), 1);
        setInputFields(values);
    }
    
    return (
        <Container fluid>
            <h1>Add New Content</h1>
            <>
                {inputFields.map(inputField => (
                    <Container key={inputField.id}>
                        <Row>
                            <Col sm={12} md={6} lg={6}>
                                <Form.Control
                                    name="name"
                                    placeholder="Dialogue Name"
                                    value={inputField.name}
                                    onChange={event => handleChangeInput(inputField.id, event)}
                                />
                            </Col>
                            <Col sm={12} md={6} lg={6}>
                                <Form.Control
                                    name="dialogueName"
                                    placeholder="Dialogue or context Name"
                                    value={inputField.dialogueName}
                                    onChange={event => handleChangeInput(inputField.id, event)}
                                />
                            </Col>
                        </Row>
                        <Row>
                            <Col xs={6} sm={6} md={6} lg={6}>
                                <Form.Select name="categories" onChange={event => handleChangeInput(inputField.id, event)}  aria-label="Choose a category" multiple >
                                     <option disabled selected={true} >Choose a category</option> 
                                    {(cats && cats.length) && cats.map((r, i) => {
                                        return (<option key={i} value={r}>{r}</option>)
                                    })}

                                </Form.Select>
                            </Col>
                            <Col xs={6} sm={6} md={6} lg={6}>
                                <Button className='m-1' variant="danger" disabled={inputFields.length === 1} onClick={() => handleRemoveFields(inputField.id)}>
                                    -
                                </Button>
                                <Button variant="primary" className='m-1'
                                    onClick={handleAddFields}
                                >
                                    +
                                </Button>
                            </Col>
                        </Row>
                    </Container>
                ))}
                <Button
                    variant="info"
                    onClick={handleSubmit}
                >Submit</Button>
            </>
        </Container >
    );
}

export default Upload

Above code is a dynamic input form which contains multiple select. Rest of the input fields are working fine. But I'm not getting the logic of Multiple select. If I select any item, then it should push into the categories array. And if I unselect any item, then that item should be removed out of the array. Also the dynamic Input should work fin. Thank You