React-select default behaviour and custom looking - reactjs

Question

I am very new in react and in react-select too. While trying to implement a custom looking component I read a lot of information, but it is not so user friendly IMHO.
I want my react-select component to show selected data in a row. Now it shows them in columns, I attached the picture.
BTW what is the purpose of name, label fields? What is the exact difference?
<Select
defaultValue={[models[0], models[1]]}
isMulti
options={models}
className="select-custom-class"
name="form-field-name"
options={models}
placeholder="Model: "
/>
I want to do some "chips style" dropdown VIA react-select. Is it possible? What style options I have to specify to round the corners like on the picture? I also want to add some static text inside the chips to be shown always: for example (regarding the pic below) "City: $here_come_the_values"
Maybe I should use another react component? The ending purpose of those dropdowns are to make filtering to the table, so I want to link them with react-bootstrap-table2.
Any help is appreciated! Thank you.

Answer 1

Well, actually I found how to make a nice-looking ONE LINE select component with dots in the end (like spread operator or ellipsis)
with modern react-jsx syntax without this
<Select
defaultValue={defaultValues}
closeMenuOnSelect={false}
isMulti
options={defaultValues}
components={{
IndicatorSeparator: () => null,
DropdownIndicator,
ClearIndicator,
MultiValueContainer: multiValueContainer
}}
and here we return all the values
const multiValueContainer = (props) => {
const label = props.data.label;
const allSelected = props.selectProps.value;
const index = allSelected.findIndex(selected => selected.label === label);
const isLastSelected = index === allSelected.length - 1;
const labelSuffix = isLastSelected ? ` (${allSelected.length})` : ", ";
const val = `${label}${labelSuffix}`;
return val;
};
and the style
const styles = {
control: (base, state) => ({
...base,
borderRadius: '16px',
border: '1px solid #E5F7FF',
boxShadow: 'none',
boxSizing: 'border - box',
wordWrap: "break-word",
'&:hover':
{
border: '1px solid #0679A8',
}
}),
valueContainer: (provided, state) => ({
...provided,
textOverflow: "ellipsis",
maxWidth: "90%",
whiteSpace: "nowrap",
overflow: "hidden",
display: "initial"
})
};