I am attempting to convert my React project to TypeScript and am stuck on this login component. I am using react-google-login, and I’m getting the following error here when using renderProps:

  Overload 1 of 2, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "error" | "inherit" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>): Element', gave the following error.
    Property 'component' is missing in type '{ onClick: () => void; disabled: boolean | undefined; }' but required in type '{ component: ElementType<any>; }'.
  Overload 2 of 2, '(props: DefaultComponentProps<SvgIconTypeMap<{}, "svg">>): Element', gave the following error.
    Type '{ onClick: () => void; disabled: boolean | undefined; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "error" | "inherit" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.
      Property 'disabled' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; classes?: Partial<SvgIconClasses> | undefined; color?: "error" | "inherit" | ... 7 more ... | undefined; ... 5 more ...; viewBox?: string | undefined; } & CommonProps & Omit<...>'.ts(2769)

Here is the rest of the component:

import React from 'react';
import { GoogleLogin } from 'react-google-login';
import { Grid } from '@material-ui/core'
import GoogleIcon from '@mui/icons-material/Google';

interface Props {
  login: (response: {}) => void;
}

const Login: React.FC<Props> = ({ login }) => {

  const responseGoogle = (response: {}) => {
    login(response)
  }

  return (
    <div>
      <Grid container justifyContent="center">
        <GoogleLogin 
          clientId='8013933409-b2i0rd6n1i5i67hen1k874pqdjr4oj4r.apps.googleusercontent.com'
          render={renderProps => (
            <GoogleIcon onClick={renderProps.onClick} disabled={renderProps.disabled}/>
          )}
          onSuccess={responseGoogle}
          onFailure={responseGoogle}
          cookiePolicy={'single_host_origin'}
        /> 
      </Grid>
    </div>
  );
};
  
export default Login;

Any ideas on how to solve this? Thanks in advance for your help!

>Solution :

You are passing button props on svg component, replace GoogleIcon svg component with button like IconButton from MUI

import IconButton from '@mui/material/IconButton';
import GoogleIcon from '@mui/icons-material/Google';

    ...
    
          render={renderProps => (
              <IconButton onClick={renderProps.onClick} disabled={renderProps.disabled}>
                <GoogleIcon />
              </IconButton>
          )}
    
    ...