Help regarding attaching event handlers to React components

I’m having a hard time understanding some rendering mechanics in React specifically when different components interact.

Link to exercise

In this exercise, I attempted to make the component Talker render the other component - Button - with an onClick event that would execute the function defined within Talker. Like so:

class Talker extends React.Component {
  talk() {
    let speech = '';
    for (let i = 0; i < 10000; i++) {
      speech += 'blah ';
    }
    alert(speech);
  }
  
  render() {
    return <Button onClick={this.talk}/>;
  }
}

ReactDOM.render(
  <Talker />,
  document.getElementById('app')
);

Meanwhile, the Button component is just a button, nothing else:

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button>
        Click me!
      </button>
    );
  }
}

But this does not render the Button component at all - even though it seems to me Talker should return a Button component with an onClick event attached to it. Meaning the Button with the attached event should be rendered correctly through ReactDOM.render(, …) because Talker IS a Button but with an additional attribute.

But I think I’m misunderstanding something fundamental. Can someone explain to me why this does not work? I can see the solution to the exercise but it doesn’t make a lot of sense to me. What fixes it is attaching the onClick event to the Button component instead:

import React from 'react';

export class Button extends React.Component {
  render() {
    return (
      <button onClick={this.props.talk}>
        Click me!
      </button>
    );
  }
}

I get that the Button component here references its’ own props and onClick launches the talk() function defined within Talker. But essentially in the correct and functional code I have 2 components returning 2 buttons with different attributes attached, but somehow they interact and I don’t see how.