onClick event is not working

[happy-func]

import React, { useState } from "react";
import { Button } from "antd";
import { KeepAlive } from "react-keep-alive";

const SchoolList: React.FC = function () {
  const [counter, setCount] = useState(2);
  function addHandle() {
    setCount(counter + 1);
  }
  return (
    <div onClick={addHandle} style={{ position: 'relative', zIndex: 1001 }}>
      {counter}
      <Button>+ 1</Button>
    </div>
  );
};

export default () => (<KeepAlive name="SchoolList"><SchoolList /></KeepAlive>);

[fhyfhytt]

+1

[guody]

+1

[Ez-21]

+1

[ghost]

+1

[BoBoDinachen]

+1

[continue2b]

+1

[continue2b]

I tested the latest react-keep-alive@2.5.2 version with react@16.14.0 and react@17.0.2. The interactions within components seems to break starting from React v17.

react16 working
react17 not working
The only difference between these two examples is the react version.

Most likely it has to do with changes to Event Delegation.