- Added the ability for a student/developer to choose a gender for a speaking instructor;

- Made it so, if chosen, the user will only get speaking exams with their chosen gender;
- Added the ability for speaking exams to select a gender when generating;

src/components/Low/Select.tsx

@@ -1,68 +1,61 @@
 import clsx from "clsx";
-import { ComponentProps } from "react";
+import {ComponentProps, useEffect, useState} from "react";
 import ReactSelect from "react-select";
 
 interface Option {
-  [key: string]: any;
-  value: string;
-  label: string;
+	[key: string]: any;
+	value: string;
+	label: string;
 }
 
 interface Props {
-  defaultValue?: Option;
-  value?: Option | null;
-  options: Option[];
-  disabled?: boolean;
-  placeholder?: string;
-  onChange: (value: Option | null) => void;
-  isClearable?: boolean;
+	defaultValue?: Option;
+	value?: Option | null;
+	options: Option[];
+	disabled?: boolean;
+	placeholder?: string;
+	onChange: (value: Option | null) => void;
+	isClearable?: boolean;
 }
 
-export default function Select({
-  value,
-  defaultValue,
-  options,
-  placeholder,
-  disabled,
-  onChange,
-  isClearable,
-}: Props) {
-  return (
-    <ReactSelect
-      className={clsx(
-        "placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
-        disabled &&
-          "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
-      )}
-      options={options}
-      value={value}
-      onChange={onChange}
-      placeholder={placeholder}
-      menuPortalTarget={document?.body}
-      defaultValue={defaultValue}
-      styles={{
-        menuPortal: (base) => ({ ...base, zIndex: 9999 }),
-        control: (styles) => ({
-          ...styles,
-          paddingLeft: "4px",
-          border: "none",
-          outline: "none",
-          ":focus": {
-            outline: "none",
-          },
-        }),
-        option: (styles, state) => ({
-          ...styles,
-          backgroundColor: state.isFocused
-            ? "#D5D9F0"
-            : state.isSelected
-              ? "#7872BF"
-              : "white",
-          color: state.isFocused ? "black" : styles.color,
-        }),
-      }}
-      isDisabled={disabled}
-      isClearable={isClearable}
-    />
-  );
+export default function Select({value, defaultValue, options, placeholder, disabled, onChange, isClearable}: Props) {
+	const [target, setTarget] = useState<HTMLElement>();
+
+	useEffect(() => {
+		if (document) setTarget(document.body);
+	}, []);
+
+	return (
+		<ReactSelect
+			className={clsx(
+				"placeholder:text-mti-gray-cool border-mti-gray-platinum w-full rounded-full border bg-white px-4 py-4 text-sm font-normal focus:outline-none",
+				disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
+			)}
+			options={options}
+			value={value}
+			onChange={onChange}
+			placeholder={placeholder}
+			menuPortalTarget={target}
+			defaultValue={defaultValue}
+			styles={{
+				menuPortal: (base) => ({...base, zIndex: 9999}),
+				control: (styles) => ({
+					...styles,
+					paddingLeft: "4px",
+					border: "none",
+					outline: "none",
+					":focus": {
+						outline: "none",
+					},
+				}),
+				option: (styles, state) => ({
+					...styles,
+					backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
+					color: state.isFocused ? "black" : styles.color,
+				}),
+			}}
+			isDisabled={disabled}
+			isClearable={isClearable}
+		/>
+	);
 }