how can i set object list in default input value

need to set default value like you can see In the image and if a user want to remove default value or select only one he is able to do it right now it’s not set to default user need to select that list object one by one but I need to set all value by default it objects list you can see list type is store in object how can I set this all object to by default in the dropdown list after setting by default I set it like this value={listType} but when I try to change it or remove it not changing

const changeList = (e) => {
    console.log("List s is.....", ListS);
    console.log("e here is", e);

    if (e.selected.find(({ value }) => value === "Sanctions")) {
      setListS((prev_state) => ({
        ...prev_state,
        Sanctions: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        Sanctions: false,
      }));
      setSearchType({ value: "individual", label: "individual" });
    }

    if (e.selected.find(({ value }) => value === "AMS")) {
      setListS((prev_state) => ({
        ...prev_state,
        NNS: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        NNS: false,
      }));
    }

    if (e.selected.find(({ value }) => value === "PEP")) {
      setListS((prev_state) => ({
        ...prev_state,
        PEP: true,
      }));
    } else {
      setListS((prev_state) => ({
        ...prev_state,
        PEP: false,
      }));
    }
  };
const [ListS, setListS] = useState({
    Sanctions: false,
    NNS: false,
    PEP: false,
  });
 const listType = [
    { value: "Sanctions", label: "Sanctions" },
    { value: "NNS", label: "AMS" },
    { value: "PEP", label: "PEP" },
  ];
              <Select
                options={listType}
                name="sanctionList"
                placeholder="Select"
                isMulti
                styles={{
                  multiValueLabel: (base) => ({
                    ...base,
                    backgroundColor: "#0bb7a7",
                    color: "white",
                    fontSize: "0.8vw",
                    borderRadius: 5,
                  }),
                  control: (data) => ({
                    ...data,
                    fontFamily: "Montserrat",
                    fontSize: "0.8vw",
                    borderColor: "#adadad",
                  }),
                  menu: (data) => ({
                    ...data,
                    fontFamily: "Montserrat",
                    fontSize: "0.8vw",
                  }),
                }}
                  // isDisabled={!ListSel}
                  value={ListS}
                onChange={(e) => changeList({ selected: e })}
                theme={(theme) => ({
                  ...theme,
                  colors: {
                    ...theme.colors,
                    text: "black",
                    primary25: "#d6fdf7",
                    primary: "#0bb7a7",
                    primary50: "#d6fdf7",
                  },
                })}
              ></Select>

Answer

  1. Since you use different label and value attributes, you need to use getOptionLabel of react-select component to identify the label.
  2. Your values do not include AMS, you need to control NNS instead of AMS in your second if/else of your changeList function.

The following code can be a valid example of setting default values on multi selectable Select component.

    import React, { Component, useState } from 'react';
    import Select from 'react-select';

    const MySelectComponent = () => {

      const [ListS, setListS] = useState({
        Sanctions: true,
        NNS: true,
        PEP: false,
      });

      const listType = [
        { value: "Sanctions", label: "Sanctions" },
        { value: "NNS", label: "AMS" },
        { value: "PEP", label: "PEP" },
      ];

      const changeList = (e) => {
      console.log("List s is.....", ListS);
      console.log("e here is", e);

      if (e.selected.find(({ value }) => value === "Sanctions")) {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          Sanctions: false,
        }));
        //setSearchType({ value: "individual", label: "individual" });
      }

      if (e.selected.find(({ value }) => value === "NNS")) {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          NNS: false,
        }));
      }

      if (e.selected.find(({ value }) => value === "PEP")) {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: true,
        }));
      } else {
        setListS((prev_state) => ({
          ...prev_state,
          PEP: false,
        }));
      }
      };
      const selectedValueKeysFiltered = Object.keys(ListS).filter((sv) => {
          return ListS[sv];
      });

      const selectedValue = selectedValueKeysFiltered.map((svk) => {
        return listType.find(lt => lt.value === svk);
      });

      return <Select
        getOptionLabel={option => {return `${option.label}`}}
         options={listType}
         name="sanctionList"
         placeholder="Select"
         isMulti
         styles={{
           multiValueLabel: (base) => ({
             ...base,
             backgroundColor: "#0bb7a7",
             color: "white",
             fontSize: "0.8vw",
             borderRadius: 5,
           }),
           control: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
             borderColor: "#adadad",
           }),
           menu: (data) => ({
             ...data,
             fontFamily: "Montserrat",
             fontSize: "0.8vw",
           }),
         }}
           // isDisabled={!ListSel}
           value={selectedValue}
         onChange={(e) => changeList({ selected: e })}
         theme={(theme) => ({
           ...theme,
           colors: {
             ...theme.colors,
             text: "black",
             primary25: "#d6fdf7",
             primary: "#0bb7a7",
             primary50: "#d6fdf7",
           },
         })}
       ></Select>;
    };

    export default MySelectComponent;