mui-Autocomplete dropdown goes up when the state changed - reactjs

Question

I have a component which written with mui Autocomplete component. I have a expand-collapse ability in the component and ı keep the expanded collapsed values in one state.
When ı clicked to something that will change this state, my autocomplete re-renders as ı expect but dropdown list goes up. This is my main problem.
How can ı avoid this? Is there any prop or something to solve that ? I tried to manage with sholudComponent update but in that case, state changes but autocomplete not re-renders so it calses another problem.
Example gif belong here
I hold the expanded portfolios in expandedPortfolios state and when ı clicked arrow ıcon handle with handleExpand function and change the state so ı can manage which group will expanded or collapsed.
handleExpand = (portfolioName) => {
var portfolio = (this.state.portfoliosAsGroup || []).find(p => p.name == portfolioName);
if (portfolio) {
let portfolioId = portfolio.id;
let current = this.state.expandedPortfolios;
console.log(current);
let Ids = [];
if (current.includes(portfolioId)) {
console.log("filter");
Ids = current.filter((i) => i !== portfolioId);
} else {
console.log("push");
Ids.push(...current, portfolioId);
}
console.log(Ids);
this.setState({ expandedPortfolios: Ids, expand: !this.state.expand });
}
}
renderGroup={(params) => (
<>
{console.log(params)}
<div style={{ display: "flex", alignItems: "center", height: "20px", marginTop: '15px' }}>
{params.group != dropdownGroupTags.all && <IconButton size="small" onClick={() => this.handleExpand(params.group)}>
{(!(this.state.expandedPortfolios || []).includes(this.getPortfolioIdByName(params.group)) ?
<ExpandLessIcon /> : <ExpandMoreIcon />)}
</IconButton>}
{params.group != dropdownGroupTags.all ? <WarehouseIcon /> : <AccountBalanceIcon />}
<Button onClick={() => params.group != "Unportfolio" && this.handleCompanyChange(this.createCompanyGroupChangeText(params.group), params.group)}>
<Typography variant="subtitle1" sx={{ fontWeight: 'bold' }}>
{params.group}
</Typography>
</Button>
<div style={{
marginLeft: 'auto',
marginRight: '30px'
}}>
<Typography align="right" variant="subtitle1" sx={{ fontWeight: 'bold' }}>
{params.group != dropdownGroupTags.all && `${(params.children || []).length} Unit`}
</Typography>
</div>
</div>
{/* <Typography variant="subtitle1" sx={{fontWeight: 'bold'}}>{(params.children || []).length} Unit</Typography> */}
<br />
{(this.state.expandedPortfolios || []).includes(this.getPortfolioIdByName(params.group)) ? params.children : []}
</>
)}