Change value of Combobox (headlessui/react)

Question

I am working on Combobox component of Headlessui/React. I am using the array to store the selected value

const App = () => {
  const [instNames, setInstNames] = useState(Array(6).fill(""));
  const [branchNames, setBranchNames] = useState(Array(6).fill(""));

  var instList = getInstName(currInstType);


  const handleClick = (id) => {
    setBranchNames((prevItems) => [
      ...prevItems.slice(0, id),
      "",
      ...prevItems.slice(id + 1, 6),
    ]);
  };

  return (
    <div>
        <MyCombobox2
          arr={instNames}
          setArr={setInstNames}
          listItems={instList}
          placeholder="Institute Name"
          id={0}
          onSelection={handleClick}
        />

        <MyCombobox2
          arr={branchNames}
          setArr={setBranchNames}
          listItems={getBranchName(instNames[0]).slice(1)}
          placeholder="Program Name"
          id={0}
          value={branchNames[0]}
        />
      </div>)}

export function MyCombobox2({arr,setArr,listItems,placeholder,id,onSelection}) {
  const [currItem, setcurrItem] = useState(arr[id]);
  const [query, setQuery] = useState("");

  const handleSelection = (e) => {
    setcurrItem(e);
    setArr((prevItems) => [
      ...prevItems.slice(0, id),
      e,
      ...prevItems.slice(id + 1, 6),
    ]);
    setQuery("");
  };
  useEffect(() => {
    setArr((prevItems) => [
      ...prevItems.slice(0, id),
      currItem,
      ...prevItems.slice(id + 1, 6),
    ]);
    if (placeholder === "Institute Name") {
      onSelection(id);
    }
  }, [currItem]);
  return (
    <dd >
      <Combobox value={currItem} onChange={setcurrItem}>
        <div>
          <Combobox.Button>
            <Combobox.Input
              onChange={(event) => setQuery(event.target.value)}
              placeholder={placeholder}
            />
          </Combobox.Button>
        </div>

        <Combobox.Options >
          <div className="py-1">
            {listItems.map((item) => (
              <Combobox.Option key={item} value={item}>
                <a onClick={() => handleSelection(item)}>{item}</a>
              </Combobox.Option>
            ))}
          </div>
        </Combobox.Options>
      </Combobox>
    </dd>
  );
}

handleClick correctly updated the branchNames through setBranchNames but the value is not updated. I am attaching the screenshot, where the branchNames array is reset but the same is not reflected by removing the value.

Additionally if can anyone tell me about the websocket error?

Thnx