reactjs - El tipo 'MouseEvent' no se puede asignar al tipo 'MouseEventHandler'

Principiante en TS aquí. Estoy recibiendo este error en la propiedad 'handleClick' de mi <TailwindButton /> en SignUpForm.tsx :

El tipo '(e: React.MouseEventHandler) => void' no es asignable al tipo 'MouseEventHandler'. Los tipos de parámetros 'e' y 'event' son incompatibles. El tipo 'MouseEvent' no es asignable al tipo 'MouseEventHandler'. El tipo 'MouseEvent' no proporciona coincidencia para la firma '(event: MouseEvent): void'

Estoy usando VSCode y pasé el ratón sobre onClick para obtener el tipo correcto, pero aún sigo recibiendo el error. He intentado usar <Element> en lugar del tipo <HTMLButtonElement> como se sugiere aquí y todavía recibo el error. Por favor, ayúdame.

TailwindButton.tsx:

import React from 'react'

interface TailwindButtonProps {
    icon: string;
    text: string;
    handleClick: React.MouseEventHandler<HTMLButtonElement>
}

const TailwindButton: React.FC<TailwindButtonProps> = ({ icon, text, handleClick }) => {
    return (
        <button className='bg-primary rounded text-white flex items-center justify-between h-full w-full
            p-2
        '
            type="submit"
            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)} 
        >
            <p>{text}</p>
            <p>
                <img src={icon} alt="forward_icon" />
            </p>
        </button>
    )
}

export default TailwindButton

FormularioRegistro.tsx:

import React, { useState } from 'react'
import profileIcon from '../images/icons/profile.svg'
import forwardIcon from '../images/icons/forward.svg'
import TailwindInput from './TailwindInput'
import TailwindButton from './TailwindButton'

const SignUpForm: React.FC = () => {
    const [values, setValues] = useState<{ username: string; password: string }>({
        username: '',
        password: ''
    })

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValues(prev => ({
            ...prev,
            [e.target.name]: e.target.value
        }))

    }

    const handleClick = (e: React.MouseEventHandler<HTMLButtonElement>) => {

    }
    return (
        <form>
            <div>
                <TailwindInput
                    startIcon={profileIcon}
                    endIcon=""
                    placeholder="Username"
                    type="text"
                    value={values.username}
                    name="username"
                    onChange={(e) => handleChange(e)}
                />
            </div>

            <div className='flex justify-end'>
                <p className='h-10 w-1/2 md:w-1/3'>
                    <TailwindButton
                        icon={forwardIcon}
                        text="Next"
                        
                        handleClick={(e: React.MouseEventHandler<HTMLButtonElement>) => handleClick(e)} //error is here
                    />
                </p>
            </div>
        </form>
    )
}

export default SignUpForm

Respuesta #1

Prueba el siguiente cambio en los tipos de evento onClick:

 onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)}

Código completo:

import React from 'react'

interface TailwindButtonProps {
    icon: string;
    text: string;
    handleClick: React.MouseEventHandler<HTMLButtonElement>
}

const TailwindButton: React.FC<TailwindButtonProps> = ({ icon, text, handleClick }) => {
    return (
        <button className='bg-primary rounded text-white flex items-center justify-between h-full w-full
            p-2
        '
            type="submit"
            onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => handleClick(e)} //error is here
        >
            <p>{text}</p>
            <p>
                <img src={icon} alt="forward_icon" />
            </p>
        </button>
    )
}

export default TailwindButton