const options: OptionsType[] = servers?.items.map(currentServer) || [];
  if (!hasSelected) {
    defaultServer = { value: "", label: "Select server" };
    options.unshift(defaultServer); // Add a placeholder option at the beginning
  }

  console.log(options);

  const handleChange = (newValue: unknown, actionMeta: ActionMeta<unknown>) => {
    const selectedOption = newValue as OptionsType | null;
    console.log(selectedOption);

    if (selectedOption && selectedOption.value) {
      window.location.href = selectedOption.value;
    }

    
  };

  const colourStyles: StylesConfig = {
    control: (styles) => ({
      ...styles,
      backgroundColor: "#222835",
      margin: 0,
      border: 0,
      width: "fit-content",
    }),
    indicatorSeparator: (styles) => ({ ...styles, display: "none" }),
    option: (styles, state) => ({
      ...styles,
      backgroundColor: state.isFocused ? "#1C7DC1" : "#222835",
      paddingLeft: "10px",
      paddingRight: "10px",
    }),
    menu: (styles) => ({ ...styles, backgroundColor: "#222835" }),
  };
  //value={[{ value, label }]}

  return (
    <Select
      options={options}
     // defaultValue={hasSelected ? defaultServer : null}
      value={[hasSelected ? defaultServer : { value: "", label: "Select server" } ]}
      onChange={handleChange}
      placeholder={defaultServer.label ?? "Select server"}
      styles={colourStyles}
    />
  );
}

Im just confused why the first option is clickable, but not the second? xD

package: react-select