i have select when i add select it add also the option label and value that i already added i don't want the duplicated and when it duplicated the options look like array inside array in 0 : label : ['sad'] value : ['sad'] here the duplicated one 1 : label : [Array(1)] value : [Array(1)]
import Select from 'react-select';
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import type { RootState } from '../store/store';
import Card from './Card';
import { addTarget } from '../store/FilterSlice';
import { MultiValue } from 'react-select';
function Selecting() {
const data = useSelector((state: RootState) => state.data);
const targets = useSelector((state: RootState) => state.target);
const options = data?.map((items) => ({ value: items.tags, label: items.tags })) || [];
const [selectedTags, setSelectedTags] = useState<{label: string}[]>([]);
const dispatch = useDispatch()
const handleChange = (newValue: MultiValue<string>) => {
const tags = newValue.label.join(" ")
setSelectedTags(tags);
dispatch(addTarget(tags));
console.log(options)
};
return (
<>
<form>
<label className="block pb-2">Tags</label>
<Select
className="basic-single lg:w-[40.5rem]"
classNamePrefix="select"
name="color"
options={options}
value={selectedTags}
onChange={handleChange}
/>
</form>
</>
);
}
export default Selecting;
i want just the unsique label and value i tried filter and set methode but it doesn't work.