Boa noite. Estou com dúvidas sobre tal método do ciclo de vida do React e estou fazendo testes. Um deles, é cancelar uma requisição fetch, no entanto, não estou conseguindo. Aqui vai meu código:

const abortController = new AbortController()

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      load: true
    };
  }
  toogle = () => {
    const { load } = this.state;

    this.setState({ load: !load });
  };

  render(){
    const { load } = this.state
    return(
      <>
        {
          load?
          <>
            <h1>Principal</h1>
            <button onClick={this.toogle}>Clique</button>
          </>:
          <Teste click={this.toogle}/>

        }
      </>
    )
  }
}

class Teste extends Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    console.log("fui montado");
    fetch('https://pokeapi.co/api/v2/evolution-chain/?limit=6&offset=0',{
      signal: abortController.signal
    }).then(res => res.json()).then(res => console.log(res))
  }

  componentWillUnmount() {
    console.log("fui desmontado");
    abortController.abort()
  }

  render(){
    return(
      <>
        <h1>Alo</h1>
        <button onClick={this.props.click}>Clique</button>
      </>
    )
  }
}

Alguém tem alguma ideia do que possa ser?

Desde já, agradeço a atenção.