Select Issue

import {
  MDBBtn,
  MDBCol,
  MDBModal,
  MDBModalBody,
  MDBModalContent,
  MDBModalDialog,
  MDBModalFooter,
  MDBModalHeader,
  MDBModalTitle,
  MDBRow,
  MDBSelect,
  SelectData,
} from "mdb-react-ui-kit";
import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
import {
  getUpdatedUserDTO,
  UpdateUserDTO,
  UserDTO,
} from "../../../../../Contracts/Authentication/Identity/User/UserDTO";
import { useForm, SubmitHandler } from "react-hook-form";
import { useAlert } from "../../../../modules/Alerts/AlertContext";
import { useDarkMode } from "../../../../modules/Themes/ThemeContext";
import { useUserControllerContext } from "../../../../../Services/Authentication/Identity/User/UsersController";
import { useRoleControllerContext } from "../../../../../Services/Authentication/Identity/Role/RolesController";
import { RoleDTO } from "../../../../../Contracts/Authentication/Identity/Role/RoleDTO";
type Inputs = {
  email: string;
  password: string;
  password_repeat: string;
};

interface Props {
  userDTO: UserDTO;
  handleRefresh: () => void;
  allRoles: RoleDTO[]
}

export interface EditComponentShowModal {
  toggleShow: () => void;
}

export const Edit = forwardRef<EditComponentShowModal, Props>(
  (props: Props, ref) => {
    const usersController = useUserControllerContext();
    const { setAlert } = useAlert();
    const { textTheme } = useDarkMode();
    const { bodyTheme } = useDarkMode();

    //START MODAL
    const [staticModal, setStaticModal] = useState(true);
    const [updateUserDTO, setUpdateUserDTO] = useState(
      getUpdatedUserDTO(props.userDTO)
    );

    const [allRoles, setAllRoles] = useState<RoleDTO[]>(props.allRoles);

    //ROLE MULTISELECT START
    const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
    let selectData = useMemo(() =>
    allRoles.map((value: RoleDTO, index: number) =>{ return { text: value.name as string, value: index };}), [selectedRoles])
    //ROLE MULTISELECT END

    //This exposes toggle show to parent. Without this parent cannot call toggle show with reference
    useImperativeHandle(ref, () => ({
      toggleShow() {
        alert(JSON.stringify(selectData));
        setStaticModal((value) => !value);
      },
    }));
    function tShow() {
      setStaticModal((value) => !value);
    }
    const onHideModal = () => {
      setUpdateUserDTO(getUpdatedUserDTO(props.userDTO));

      reset({
        email: props.userDTO.email,
        password: "",
        password_repeat: "",
      });
    };
    //END MODAL




    const {
      register,
      handleSubmit,
      getValues,
      watch,
      reset,
      formState: { errors },
      //Default values for form
    } = useForm<Inputs>({
      defaultValues: {
        email: props.userDTO.email,
        password: "",
        password_repeat: "",
      },
    });

    //FORM EVENTS

    const onSubmit: SubmitHandler<Inputs> = (e: any) => {
      e.preventDefault();

      alert("selected roles are " + JSON.stringify(selectedRoles));
      setUpdateUserDTO({
        id: props.userDTO.id,
        oldEmail: props.userDTO.email,
        newEmail: getValues().email,

        roles: ["test"],
      });

      const response = usersController
        .updateUser(updateUserDTO)
        .then(
          (response: {
            ok: any;
            statusText: string | undefined;
            json: () => any;
          }) => {
            if (!response.ok) throw new Error(response.statusText);

            setAlert("Updated user", "success");

            setStaticModal(false);
            props.handleRefresh();
          }
        )
        .catch((error: string) => {
          console.log("Error updating user: " + error);
          setAlert("Unable to update user", "danger");
          setStaticModal(false);
        });
    };

    return (
      <>
        <MDBModal
          staticBackdrop
          tabIndex="-1"
          show={staticModal}
          setShow={setStaticModal}
          onHide={onHideModal}
        >
          <MDBModalDialog>
            <MDBModalContent className={bodyTheme}>
              <MDBModalHeader>
                <MDBModalTitle>Edit User {props.userDTO.email}</MDBModalTitle>
              </MDBModalHeader>

              <MDBModalBody className="text-center">
                {/* //handleSubmit" will validate your inputs before invoking "onSubmit" */}
                <form id="editUserForm" onSubmit={handleSubmit(onSubmit)}>
                  <MDBRow>
                    <MDBCol md="12">
                      <label className={`${textTheme} form-label`}>
                        Email address
                      </label>
                    </MDBCol>
                  </MDBRow>
                  <MDBRow className="mb-4">
                    <MDBCol md="12">
                      <input
                        ///START EMAIL INPUT
                        {...register("email", {
                          required: true,
                          minLength: 5,

                          pattern: {
                            value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                            message: "invalid email address",
                          },
                        })}
                        id="email"
                        type="email"
                        placeholder="yourEmail@email.com"
                      />
                      {errors?.email?.type === "required" && (
                        <p className="text-danger">This field is required</p>
                      )}
                      {errors?.email && (
                        <p className="text-danger">{errors.email.message}</p>
                      )}
                      {errors?.email?.type === "pattern" && (
                        <p className="text-danger">Invalid email address</p>
                      )}
                    </MDBCol>
                    {/* END EMAIL INPUT */}
                  </MDBRow>
                  <MDBRow>
                    <MDBCol md="12">
                      <label className={`${textTheme} form-label`}>
                        Password
                      </label>
                    </MDBCol>
                  </MDBRow>

                  <MDBRow>
                    <MDBCol md="12" className="text-center">
                      <MDBBtn type="submit">Submit</MDBBtn>
                    </MDBCol>
                  </MDBRow>
                </form>
                <MDBRow>
                  <MDBCol md="12">
                    <MDBSelect
                      data={selectData}
                      multiple
                      label="Roles"
                      onValueChange={(e) => {
                        if (e instanceof Array){
                          setSelectedRoles(e.map((r) => r.text!));
                        }
                        console.log(JSON.stringify(selectedRoles));
                      }}
                    />
                  </MDBCol>
                </MDBRow>
              </MDBModalBody>

              <MDBModalFooter>
                <MDBBtn color="secondary" onClick={() => tShow()}>
                  Close
                </MDBBtn>
              </MDBModalFooter>
            </MDBModalContent>
          </MDBModalDialog>
        </MDBModal>
      </>
    );
  }
);