Autocomplete react-select bad styles - reactjs

Question

I'm using react-select autocomplete component for my react js web site. I just copied the example code in this link inside to a table cell, but it is not working properly as shown in the below image.
However, it individually works fine. Please help me with this issue. Here is the code.
Autocomplete.jsx has the same code as in the above link.
...
import Autocomplete from './Autocomplete.jsx';
...
const useStyles = makeStyles(theme => ({
textField: {
padding: theme.spacing(),
width: '100%',
},
}));
...
export default function Mapping(props) {
const classes = useStyles();
...
return (
<TableRow>
<TableCell>
<TextField
required
id='outlined-required'
label='URL pattern'
variant='outlined'
value={name}
onChange={event => setName(event.target.value)}
className={classes.textField}
/>
</TableCell>
<TableCell>
<Autocomplete arn={arn} setArn={setArn} />
</TableCell>
{resource.editable ?
<TableCell>
<Button onClick={saveResource}>Save</Button>
<Button onClick={cancel}>Cancel</Button>
</TableCell>
:
<TableCell>
<Button onClick={addResource}>Add</Button>
</TableCell>
}
</TableRow>
);
}
=========================================================================
...
import Mapping from './Mapping.jsx';
...
const useStyles = makeStyles(theme => ({
root: {
paddingBottom: theme.spacing(),
paddingTop: theme.spacing(),
width: '100%',
marginTop: theme.spacing(),
},
mappingsWrapper: {
padding: theme.spacing(),
borderRight: '#c4c4c4',
borderRightStyle: 'solid',
borderRightWidth: 'thin',
},
mappingsHeading: {
display: 'flex',
alignItems: 'center',
},
mappingsTitle: {
paddingLeft: theme.spacing(),
fontSize: '1rem',
paddingTop: theme.spacing(),
paddingBottom: theme.spacing(),
},
}));
...
export default function Mappings() {
const classes = useStyles();
...
return (
<Paper className={classes.root}>
<Grid container item xs={12}>
<Grid xs className={classes.mappingsWrapper}>
<div className={classes.mappingsHeading}>
<Typography className={classes.mappingsTitle}>
Mappings
</Typography>
</div>
<Table stickyHeader>
<TableHead>
<TableRow>
{columns.map(column => (
<TableCell
key={column.id}
align={column.align}
style={{ minWidth: column.minWidth }}
>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{resources.map((resource) => {
if (resource.editable) {
return (
<Mapping
resource={resource}
resources={resources}
setResources={setResources}
/>
);
} else {
return (
<TableRow>
<TableCell>{resource.name}</TableCell>
<TableCell>{resource.arn}</TableCell>
<TableCell>
<Button onClick={() => editResource(resource)}>Edit</Button>
<Button onClick={() => deleteResource(resource)}>Delete</Button>
</TableCell>
</TableRow>
);
}
})}
<Mapping
resource={{ name: '', arn: '', editable: false }}
resources={resources}
setResources={setResources}
/>
</TableBody>
</Table>
</Grid>
</Grid>
</Paper>
);
}