How to filter values in a map in jsx?

I have a React function that handles user selections from a dropdown. The function is meant to handle two features:

Feature 1: When the user selects a key (from ourMap), the corresponding mGIds should be selected.

Feature 2: When the user selects specific mGIds, the corresponding key(s) from ourMap should be selected.

However, I’m facing an issue with Feature 2, where I need to filter the mGIds from the ourMap based on the selected values in mGDropdown. Specifically, if a user selects mGIds that match part of a key’s values in ourMap, the corresponding key should be selected—even if the user hasn’t selected all the mGIds for that key.

Problem Description:

In the handleOnChange function, I have a map ourMap with the following type:

interface ConfigurationMap {
  configurationName: string | null;
  mGIds: number[];  // List of mGIds associated with the key
}

The structure is such that ourMap’s key represents an ID, and the value is an array of mGIds (e.g., mGIds: [500, 300]).

When a user selects a key, the corresponding mGIds are retrieved, and I want to filter those mGIds against mGDropdown, which contains the mGIds that the user is allowed to see.

for example, please consider the below data

ourMap = new Map([
  [1, { configurationName: 'Key 1', mGIds: [500, 300] }],
  [2, { configurationName: 'Key 2', mGIds: [200, 350, 450] }]
]);

this.props.mGDropdown = [
  { value: 500 }, { value: 300 }, { value: 200 }, { value: 350 }
];

Feature 1: If the user selects key 1, the mGIds 500 and 300 should be selected.

Feature 2: If the user selects 200 and 350 from mGDropdown, key 2 should be selected, even though 450 is part of key 2’s mGIds but not in the mGDropdown.
The issue is that when a user selects 200 and 350, the current logic does not select key 2 because 450 is also part of key 2’s mGIds. The requirement is that 450 should be filtered out and key 2 should be selected because 200 and 350 are in mGDropdown.

code block:

handleOnChange = (selection, e) => {
    const { qaFilters, edit, ourMap } = this.props;
    const { name: filterName } = e;
    if (filterName === 'MapFilters') {
      const selectedKeys = selection.map((item) => item.label);
      const selectedMGIds = selectedKeys.reduce((acc, key) => {
        const mgIds = ourMap.get(key)?.mgIds || [];
        return acc.concat(mgIds);
      }, []);

      const selectedMGs = this.props.mGDropdown.filter(
        (group) => selectedMGIds.includes(group.value)
      );
      const updatedFilters = {
        ...qaFilters,
        mGFilters: selectedMGs,
      };
      ...
    } 
  };
  
  
  render(){
    const selectedPSs = this.getSelectedPSs(
      mGFilters,
      ourMap,
      pSOptions
    );
    const pSFilters = [...selectedPSs];
  }
  
  
  getSelectedPSs(
    mGFilters,
    ourMap,
    pSOptions
  ) {
    const selectMGIds = mGFilters
      ? mGFilters.map((item) => item.value)
      : [];

    const allMGMatch = (mGIds) => {
      return mGIds.every((id) =>
        selectMGIds.includes(id)
      );
    };

    const pSEntries = Array.from(ourMap.entries());

    const filteredEntries = pSEntries.filter(
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      ([_, { mGIds }]) => {
        const match = allMGMatch(mGIds);
        return match;
      }
    );

    const matchingCIds = filteredEntries.map(([key]) => {
      return key;
    });

    return pSOptions.filter((group) =>
      matchingCIds.includes(group.value)
    );
  }

What I Need:
I need to filter out mGIds from ourMap that are not present in this.props.mGDropdown. For example, if 450 is in the mGIds of a key (like key 2), but it is not part of the mGDropdown, it should be excluded.
Key 2 should still be selected if the user selects 200 and 350, even though 450 exists in ourMap for key 2.

Question:
How can I modify the logic in handleOnChange to filter out mGIds from ourMap that are not part of this.props.mGDropdown, so that feature 2 works as expected?