Função executando quando o componente é criado ao invéz de onClick

App.js

  deleteNote(indice) {
    console.log("delete");
    console.log(indice);
  }

  render () { return (
    <section>
      <Form newNote ={this.newNote.bind(this)} />
      <NotesList 
        notes={this.notes} 
        deleteNote={this.deleteNote.bind(this)} 
      />
    </section>
  )};

NotesList.jsx

class NotesList extends Component {
    render() { return (
        <ul className="notesList">
            {
               this.props.notes.map((note, index) => {
                    return (
                        <li key={index}>
                            <Card
                                indice={index} 
                                title={note.title} content={note.content}
                                deleteNote={this.props.deleteNote}
                            />
                        </li>
                    );
                })
            }
        </ul>
    )};
  }

Card.jsx

import deleteSVG from './img/delete.svg';

function Card(props) {
    return (
      <div>
        <img indice={props.indice} src={deleteSVG} onClick={props.deleteNote(props.indice)} />
        <p>{props.title}</p>
        <p>{props.content}</p>
      </div>
    );
  }

export default Card;

O indice está sendo passado corretamente, se eu inspecionar o Card na página, ele contém o índice correto.

Se eu usso a função no onClick={props.deleteNote} sem passar nada entre () ela printa o cosole.log("delete") corretamente na hora que eu clico.

Mas se eu mudar para onClick={props.deleteNote(indice) na hora que o Card é criado ele já printa o console.log("delete") junto com o console.log(indice), o indice aparece correto no console. Mas quando eu clico na img nada acontece.