React DnD draggable ListItem won't stay inline - reactjs

Question

I'm trying to make ListItems inside a List draggable without changing too much structure, it seems to work but the styling is very off:
The icons and its names should be on one line but for some reason the <ListItemText> keeps being shoved into the next line when it shouldn't be. Here's my draggable code:
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" direction="vertical">
{(provided) => (
<div
ref={provided.innerRef}
{...provided.droppableProps}
>
{menuList.map((text, index) => (
<Draggable key={text} draggableId={text} index={index}>
{(provided) => (
<ListItem key={text} disablePadding}}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}>
<IconButton id={text} onClick={handleFav} disableRipple sx={{
minWidth: 0,
maxWidth: 1,
mr: 1,
justifyContent: 'center',
}}>
<StarRateRoundedIcon/>
</IconButton>
<IconButton sx={{ padding: 0, mr: 1 }}>
<VisibilityIcon sx={{ position: 'relative', verticalAlign: 'bottom', bottom: 1, color: '#00417d' }} />
</IconButton>
<ListItemText primary={text} sx={{ width: '16px', margin: 0 }} />
</ListItem>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
I did something similar for table cells and the items were inline, but this one isn't. I've tried setting the ListItem iteself to inline but that didn't seem to fix it. It seems that there's a div that either belongs to the draggable or the listitem itself that isn't the right size, but I can't tell which one:

Answer 1

The ListItemText component was causing it to wrap into its own line. I couldn't find a way to stop the component itself so I decided to just ditch it for a normal typography component, it now looks like how I want:
If anyone knows how to achieve the same but with a normal ListItemText I'd also love to know. This is how I got around it with Typography for now:
<Typography display={'inline'}>{text}</Typography>