Making react component reusable

Question

I have a multiselect dropdown list component in my react application that I want to make reusable.

Here is how the component was initially coded:

function MultiselectBox({ options,setSelectedOptions }) {

    return (
        <>
            <Form.Group as={Row} className="me-3" controlId="title">
                <Form.Label>Business Units: </Form.Label>
                <Multiselect
                        onSelect={(e) => setSelectedOptions(e.map((obj => obj.code)))}
                        onRemove={(e) => setSelectedOptions(e.map((obj => obj.code)))}
                        options={options}
                        displayValue="name"
                />
            </Form.Group>
        </>
    );

}

export default MultiselectBox;

And was being called like this:

<MultiselectBox options={businessUnits} setSelectedOptions={setSelectedBusinessUnits} />

Now, what I want to do is make it reusable, this means the map function in Multiselect box will need to change. The options for this Multi select box comes from an API always returns a name and then several values, one of which I want to choose. Previously the value I needed had a key of "code" - the value I want in the second place I use the Multi select box has a key of "productionLine".

I have started changing it so it now looks like this:

function MultiselectBox({ options,setSelectedOptions, name, map }) {

return (
    <>
        <Form.Group as={Row} className="me-3" controlId="title">
            <Form.Label>{name} </Form.Label>
            <Multiselect
                    onSelect={(e) => setSelectedOptions(e.map((obj => obj.{map})))}
                    onRemove={(e) => setSelectedOptions(e.map((obj => obj.{map})))}
                    options={options}
                    displayValue="name"
            />
        </Form.Group>
    </>
);

}

export default MultiselectBox;

Here is how it is now being called:

<MultiselectBox name="Business Units" options={businessUnits} setSelectedOptions={setSelectedBusinessUnits} map="code"/>

and

<MultiselectBox name="Business Lines" options={businessLines} setSelectedOptions={setSelectedBusinessLines} map="productionLine"/>

I thought setting map as a prop into the function would work and I could then call obj.{map}, however this does not work with the error: Identifier Expected.

I have also tried this:

var mapping = {map}

and then calling it:

map.mapping

But this does not work either. I'm a little confused as the name change does not have an issue and its the same thing I'm trying to do here.