Hi In our project we are using react material Ui. We are using select and transfer list function in our Ui. We have condition that after changing Select value in dropdown right side of the tranfer list should prepopulate. Currently functionality wise it is working but when I try to print it is taking past prepopulated value for the transfer list. Below is my code.Can someone please help me? Let me know If I need to add any other details

 <InputLabel id="demo-simple-select-label">Rank</InputLabel>
                                    <Select labelId="demo-simple-select-label" id="demo-simple-select" value={roles}
                                               onChange={onRankChange}>
                                        <MenuItem value="one">one</MenuItem>
                                        <MenuItem value="two">two</MenuItem>
                                        <MenuItem value="three">three</MenuItem>
                                        <MenuItem value="four">four</MenuItem>
                                    </Select>

const [ranks, setRanks] = useState("");

 const onRankChange = (event: React.ChangeEvent<{ value: unknown}>) => {

            console.log('inside role change');
            if(event.target.value === "one"){
                setRanks(event.target.value as string);
                setLeft(["test","test1","test2"]);
                setRight(["test3","test4"]);
            }
            else if(event.target.value === "two"){
                setRanks(event.target.value as string);
                setLeft(["test3","test4"]);
                setRight( ["test","test1","test2"]);
            }
            else if(event.target.value === "three"){
                setRanks(event.target.value as string);
                setLeft( []);
                setRight( ["test","test1","test2","test3","test4"]);
            }
            else if(event.target.value === "four"){
                setRanks(event.target.value as string);
                setLeft(["test","test1","test2","test3","test4"]);
                setRight( []);
            }

            console.log('roles####' +event.target.value);
            console.log('leftChecked###' + left);
            console.log('rightChecked####' + right);
    }