<Button> onClick() not working as expected.

[Sgouws]

onClick() not firing when using the custom component.

This works with vanilla buttons, but the button component does not fire the onClick() when clicked using the element-react button component.

import React, { useState } from "react";
import { Button } from 'element-react';

import 'element-theme-default';

function Todo({todo,index, completeTodo, deleteTodo, markImportant}){
    return(
      <div className="todo" style={{ textDecoration: todo.isCompleted ? 'line-through' : ""}}>
          {todo.text}
          <div>
          <Button type="success" onClick={() => completeTodo(index)}>Complete</Button>    
          </div>
      </div>
    )
}

function App(){
  const[todos, setTodos] = useState([
    {text: "1st Todo",
    isCompleted:true,
    isImportant:false},
    {text: "Buy Milk",
    isCompleted:false,
    isImportant:false},
    {text: "Last Todo",
    isCompleted:false,
    isImportant:false}
  ]);

  const completeTodo = index => {
    const allTodos = [...todos];
    allTodos[index].isCompleted ? allTodos[index].isCompleted = false : allTodos[index].isCompleted = true;
    setTodos(allTodos);
  }

  return (
    <div className="app">
      <div className="todo-list">
        {todos.map((todo,index) => (
          <Todo key={index} index={index} todo={todo} completeTodo={completeTodo}/>
        ))}
      </div>
    </div>
  )

}
  export default App;

What am I doing wrong?

[Sgouws]

As soon as I import { Button } from 'element-react';

onClick() handlers stop working.