I have got an issue with filtering Select menu based on another select value. The second select menu should be updated on every change of the first select. What actually happens is that the second select value if filters based on the **Previous** value of the first select and not at the moment. Thank you in advance !

```
const [selectedManufacturer, setSelectedManufacturer] = useState("");
const [manufacturers, setManufacturers] = useState([]);
const [modelsMenu, setModelsMenu] = useState([]);
const [models, setModels] = useState([]);

const handleManufacturerChange = (event) => {
    setSelectedManufacturer(event.target.value);
    let chosenID = manufacturers.find(
        (manufacturer) =>
            manufacturer.Manufacturer_Name === selectedManufacturer
    )
    chosenID = (chosenID) ? chosenID.Manufacturer_ID : 'undefined';
    setModelsMenu(models.filter(model => chosenID === model.Manufacturer_ID));
};

return (
    <div className={classes.root}>
        <Grid container spacing={1}>
            <Grid item xs={12} md={2} className="register-label">
                <FormLabel>יצרן הרכב</FormLabel>
            </Grid>
            <Grid item xs={12} md={4}>
                <Select
                    value={selectedManufacturer}
                    onChange={handleManufacturerChange}
                    className={classes.formControl}
                >
                    {manufacturers.map((manufacturer, index) => {
                        return (
                            <MenuItem
                                value={manufacturer.Manufacturer_Name}
                                key={index}
                            >
                                {manufacturer.Manufacturer_Name}
                            </MenuItem>
                        );
                    })}
                </Select>
            </Grid>
            <Grid item xs={12} md={2} className="register-label">
                <FormLabel>מודל הרכב</FormLabel>
            </Grid>
            <Grid item xs={12} md={4}>
                <Select value="" className={classes.formControl}>
                    {modelsMenu.map((model, index) => {
                        return (
                            <MenuItem
                                value={model.Model_Name}
                                key={index}
                            >
                                {model.Model_Name}
                            </MenuItem>
                        );
                    })}
                </Select>
    </div>
);

```