how to add filter on options in a select field if used in array?

[palak-convivity]

I wanted to filter the options of a select field in an array within a particular collection to prevent the same option from being repeated. However, I couldn't find a solution for this specific array field. As a result, I created a custom React component for the select field and implemented all the necessary logic within it.

import React, { useEffect, useState } from "react";
import { SelectInput, useField } from "payload/components/forms";
import { useAuth, useDocumentInfo } from "payload/components/utilities";

type CustomSelectProps = {
  path: string;
};

export const CustomSelectComponent: React.FC<CustomSelectProps> = ({
  path,
}) => {
  const { id } = useDocumentInfo();
  const { value, setValue } = useField<string>({ path });
  const [usedOptions, setUsedOptions] = useState([]);

  let options = [
    {
      value: "bunny",
      label: "Bunny",
    },
    {
      value: "vimeo",
      label: "Vimeo",
    },
    {
      value: "youtube",
      label: "Youtube",
    },
  ];
  useEffect(() => {
    const fetchData = async () => {
      const data = await fetch(`http://localhost:9000/api/videos/${id}`).then(
        (d) => d.json()
      );
      setUsedOptions(data?.videos?.map((i) => i?.source));
      console.log(usedOptions, "data");
    };
    fetchData();
  }, [id]);

  const adjustedOptions = options.filter(
    (option) => !usedOptions.includes(option.value)
  );

  console.log(adjustedOptions, "adjustedOptions");

  return (
    <div>
      <label className="field-label">select source</label>
      <SelectInput
        path={path}
        name={path}
        options={adjustedOptions}
        isClearable={true}
        value={value}
        onChange={(e) => setValue(e.value)}
      />
    </div>
  );
};