2 dropdown select option iterating through same array but should not be able to select same selected value (ReactJS)

Currently I am trying to build 2 dropdown select option component that only shows columns, but the point is that it should not display the already selected value in other dropdown select option. So each value can only be selected once. So how can I fix that in the code.

Click here to go to Codesandbox

Parent component

    return (
        <div>
            <TableDropdownFilter
                columns={columns}
                onSelect={setHiddenCol1}
            />
            <TableDropdownFilter
                columns={columns}
                onSelect={setHiddenCol2}
            />
            <Table
                columns={columns}
                data={data}
                hiddenColumnsOne={hiddenCol1}
                hiddenColumnsTwo={hiddenCol2}
            />
        </div>
    )

Child component

interface TableDropdownProps {
    columns: any;
    onSelect: any;
    firstFilter?: string;
    secondFilter?: string;
}

export const TableDropdownFilter: FC<TableDropdownProps> = ({
    columns,
    onSelect,
    firstFilter,
    secondFilter
}) => {
    const [columnShow, setColumnShow] = useState<string>("");
    const [openDropdown, setOpenDropdown] = useState(false);
    const wrapperRef = useRef(null);

    const useOutsideAlerter = (ref: any) => {
        useEffect(() => {
            const handleClickOutside = (event: MouseEvent) => {
                if (ref.current && !ref.current.contains(event.target)) {
                    setOpenDropdown(false)
                }
            }

            document.addEventListener("mousedown", handleClickOutside);
            return () => {
                document.removeEventListener("mousedown", handleClickOutside);
            };
        }, [ref]);
    }

    useOutsideAlerter(wrapperRef)

    const dropdownFilter = (selectedColumn: string) => {
        setColumnShow(selectedColumn);
        setOpenDropdown(false);
        onSelect(selectedColumn);
    }

    const toggleDropdownOpen = () => setOpenDropdown(!openDropdown);
    console.log(firstFilter, secondFilter);
    return (
        <TableFilter>
            <TableFilterBlock ref={wrapperRef}>
                <TableFilterInput onClick={() => toggleDropdownOpen()}>
                    {columnShow.length > 0 ? columnShow : "Select"}</TableFilterInput>
                {typeof columnShow}
                <TableFilterDropdown toggleDropdown={openDropdown}>
                    {columns.slice(1).map((item: any, index: number) => (

                        <TableDropdownList key={index}>
                            <div onClick={() => dropdownFilter(item.id)}>
                                {item.id}
                            </div>
                        </TableDropdownList>
                    ))}
                </TableFilterDropdown>
            </TableFilterBlock>
        </TableFilter>
    )
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW