Unable to update nested state react

Question

I have a reusable drop down menu component and i render it twice with two different lists and it should update the state with the id of the first element.

the first drop down of the layout update the state without any issue but the second one does not(i switched the order and it always seems the first one updates the state the second doesn't).

please see code

dashbord

       const initializeData = {
      actionStatuses: [],
      actionCategories: [],
      actionGroups: [],
      actionEvents: [],
      actionEventsWithFilter: [],
      selectedFilters: {actionStatusId: "", actionCategoryId:""},
    };
    
    const Dashboard = ({ selectedPracticeAndFy }) => {
      const [data, setData] = useState(initializeData);
    
      const getSelectedStatus = ({ key }) => {
        const actionStatusId = key;
        const selectedFilters = { ...data.selectedFilters, actionStatusId };
        
        setData((prevState) => {
          return { ...prevState, selectedFilters }
        });
      };
      const getSelectedCategory = ({ key }) => {
        const actionCategoryId = key;
        const selectedFilters = { ...data.selectedFilters, actionCategoryId };
    
        setData((prevState) => {
          return { ...prevState, selectedFilters }
        });
      };
}

result filter:

const ResultFilter = ({actionStatuses, actionCategories, getSelectedStatus, getSelectedCategory}) => {


return (
    <Grid 
    justify="flex-start"
    container 
    >
        <Grid item >                
            <Typography component="div" style={{padding:"3px 9px 0px 0px"}}>
                <Box fontWeight="fontWeightBold" m={1}>
                    Result Filter:
                </Box>
            </Typography>
        </Grid>
        <Grid  >
            <DropdownList payload={actionCategories} onChange={getSelectedCategory} widthSize= {dropdownStyle.medium}/>
            <DropdownList payload={actionStatuses} onChange={getSelectedStatus} widthSize= {dropdownStyle.medium}/>
        </Grid>
    </Grid>

 );

}

DropdownList:

const DropdownList = ({ label, payload, onChange, widthSize, heightSize, withBorders, initialData }) => {
  const { selectedData, setSelectedData, handelInputChange } = useForm(
    payload
  );

  useEffect(() => {
    if (Object.entries(selectedData).length === 0 && payload.length !== 0) {
      setSelectedData(payload[0]);
    } 
  }, [payload]);

  useEffect(() => {
    if (Object.entries(selectedData).length !== 0) {
      onChange(selectedData);
    }
  }, [selectedData]);
  
  return (
    <div style={widthSize}>
      <div className="ct-select-group ct-js-select-group" style={heightSize}>
        <select
          className="ct-select ct-js-select"
          id={label}
          value={JSON.stringify(selectedData)}
          onChange={handelInputChange}
          style={withBorders}
        >
          {label && <option value={JSON.stringify({key: "", value: ""})}>{label}</option>}
          {payload.map((item, i) => (
            <option key={i} value={JSON.stringify(item)} title={item.value}>
              {item.value}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
};

Answer 1

It may be a stale closure issue, could you try the following:

const getSelectedStatus = ({ key }) => {
  setData((data) => {
    const actionStatusId = key;
    const selectedFilters = {
      ...data.selectedFilters,
      actionStatusId,
    };
    return { ...data, selectedFilters };
  });
};
const getSelectedCategory = ({ key }) => {
  setData((data) => {
    const actionCategoryId = key;
    const selectedFilters = {
      ...data.selectedFilters,
      actionCategoryId,
    };
    return { ...data, selectedFilters };
  });
};