React Select Multiline select

jsxconst myData = [
    { value: 1, text: 'Percentage of assets covered by systematic risk assessments (>99)' },
    { value: 2, text: 'Number of personal vacancies in the security roles required for ISMS (Nil)' },
    { value: 3, text: 'Time taken to grant, change and remove access privileges (Max. 2 hours)' },
    { value: 4, text: 'Percentage of agents covered by an effective security awareness program (100%)' },
    { value: 5, text: 'Number of security access violations (<2)' },
    { value: 6, text: 'Number of emergency changes (<5)' },
    { value: 7, text: 'Number of security incidents involving malicious code (Max. 2)' },
    { value: 8, text: 'Number of systems where security requirements are not met (Max. 2)' },
    { value: 9, text: 'Average turnaround time of incidents (Max. 2 hours)' },
    { value: 10, text: 'Number of pending actions to meet response and recovery requirements (Max. 5)' },
    { value: 11, text: 'Number of scheduled internal audits not done (Max. 1)' },
    { value: 12, text: 'Number of scheduled penetration tests not done (Max. 1)' },
    { value: 13, text: 'Number of overdue actions arising out of audit reports (Max. 5)' },
    { value: 14, text: 'Number of changes not carried out as per change control procedure (Max. 1)' }
];

const renderCustomItem = (item) => {
    return <div className="my-multi-lines-item"><span className="my-multi-lines-text">{item.display}</span></div>;
};
                            
<Select
    data={myData}
    itemHeight={60}
    maxWidth={400}
    renderItem={renderCustomItem}
    touchUi=
/>

css.my-multi-lines-item {
    font-size: 14px;
    white-space: initial;
    display: flex;
    height: 60px;
    line-height: normal;
}

.my-multi-lines-text {
    margin-top: auto;
    margin-bottom: auto;
}