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?