I created SelectType component using Styled Component as follows:

import Select from '@mui/material/Select';

export const SelectType = styled(Select)`
    width:100%;
    border:2px solid #eaeaef;
    border-radius:8px;
    margin-top:2px;
    /* padding:8px; */
`

Then I am using it as follows:

 <SelectType
     value={dataFieldType}
     placeholder="Select Data Field Type"
     onChange={handleSelect}
 >
    <MenuItem value={"address"}>Address</MenuItem>
    <MenuItem value={"number"}>Number</MenuItem>
 </SelectType>

handleSelect function is as follows:

 const handleSelect = (e:SelectChangeEvent) => {
       setDataFieldType(e.target.value as string)
 }

But onChange is showing this error:

No overload matches this call. Overload 1 of 2, '(props: { input?: ReactElement<any, any> | undefined; label?: ReactNode; slot?: string | undefined; style?: CSSProperties | undefined; title?: string | undefined; ... 292 more ...; variant?: "filled" | ... 2 more ... | undefined; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.

If I am directly using Select from MUI, it is working fine but throwing error for SelectType

How can I resolve this?