Getting the same value for dropwown on Oncahange event on react - reactjs

Question

The below image shows duplicate value getting in two drop down i need to manage the
drop down one by one dynamically on add button click.My requirement is I have need to add multiple experience using the add button.
I have calling a function to createExpDetails() to add the section dynamically when plus button is clicked.The value filled in the drop down is getting from database .The present issue is I am getting the drop downs but when one value in one dropdown is changed it automatically reflects to all the other dropdowns. I need to change the values in dropdown seperately.
const [addfiledexp,setFildExp]=useState('')
const handleChangeexp= (event:SelectChangeEvent,i) =>
{
setFildExp(event.target.value);
}
const createExpDetails=() =>
{
return(addexplist.map((el,i) =>
<div key={i}>
<Box mt={4}>
<Grid container >
<Grid item xs={5} mb={2} mr={8} ml={4}>
<TextField
name='title'
id="title"
variant='outlined'
fullWidth
label="Title"
//value={address}
//onChange={(e: any) => setAddress(e.target.value)}
/>
</Grid>
<Grid item xs={5} mb={2} ml={4}>
<TextField
name='helorganisation'
id="helorganisation"
variant='outlined'
fullWidth
label="Health Care Organization"
// value={address}
//onChange={(e: any) => setAddress(e.target.value)}
/>
</Grid>
<Grid container>
<Grid item xs={5} mb={2} mr={8} ml={4}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Type</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
name='typeselect'
//value= {console.log(addfiledexp)}
value= {addfiledexp}
label="Type"
//onChange={handleChangeexp }
onChange={(e: any) => handleChangeexp(e,i)}
>
{addexptypelist.map((typelist, key) => {
return (<MenuItem value= {typelist.name} ><option key={key} >{typelist.name}</option></MenuItem>);
})}
</Select>
</FormControl>
</Select>
</FormControl>
</Grid>
</Grid>
variant='outlined'
{ addexplist.length >1 && (
<Button className="section-add-button" onClick={()=>handleServiceexpRemove(i)}><CancelIcon className="section-add-icon" /></Button>
)
}
</Box>
</div>
));
}
{createExpDetails()}
<Button className="section-add-button" onClick={() =>addbutton('addexperiance')}><AddCircleIcon className="section-add-icon" /></Button>