How to get ListItemText - materialUI to hold just one line and truncate to the width of its container?

I am trying to use a Virtualized List from material-UI.

I am trying to get ListItemText to have a max of one line and I have tried a solution below.

I would like that text in ListItemText to NOT be horizontally scrollable, which is the issue I am having with the solution below. I am trying to get the text to truncate with the width of my container/ browser. Please can someone advise?

FixededSizeList.js

    function renderRow(props) {
      const { index, style } = props;
      return (
        <ListItem style={style} key={index} component="div" disablePadding>
          {console.log("key: " + index)}
          <ListItemButton>
          <ListItemText aria-multiline='false' sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}  primary={`${index + 1} Lorem Ipsum has been the industry's standard  been the industry's standandard  been the industry's standard dummy text dummy text eved dummy text dummy text ever since the Item `} />
      </ListItemButton>
    </ListItem>
       );
    }

    export default function VirtualizedList() {
      return (
        <FixedSizeList
          height={1000}
          itemSize={46}
          itemCount={50} // 50 items per screen good number
          overscanCount={5}
          sx={{ height: '100%', textOverflow: 'ellipsis' }}
        >
          {renderRow}
        </FixedSizeList>
      );
    }

Landing.js

    const Landing = () => {
    return (
        <>
            <CssBaseline />
            <Header />
            <Container maxWidth='false'>
                <Box sx={{ marginTop: '50px' }}>
                <FixededSizeList />
                </Box>
            </Container>
        </>
    );
}

export default Landing;