`react/no-unused-prop-types` false positve in render function with other components

  import React, { FunctionComponent } from "react";
  import "./styles.css";
  import Slide from "./Slide";

  interface SlideProps {
    isActive: boolean; // (*)
  }

  const MyCard: FunctionComponent<{ doo: boolean }> = ({ doo }) => {
    return doo ? <div>1</div> : <div>0</div>;
  }

  export default function App() {
    return (
      <div className="App">
        <Slide>{({ isActive }: SlideProps) => <MyCard doo={isActive} /> }</Slide>
      </div>
    );
  }

I found that if the children of <Slide> return anything including another component, like <MyCard> here, react/no-unused-prop-types would report a failure on isActive in SlideProps (*), which I think is a false positive.

Changing the render function to ({ isActive }: SlideProps) => isActive ? "a" : "b" would not trigger the error.

Another work-around I found is change it to: (props: SlideProps) => <MyCard doo={props.isActive} />

It seems eslint-plugin-react v7.22.0 and v7.24.0 both have this issue.

I tried to make a minimal reproducing repo here: https://github.com/redeyes2015/no-unused-prop-types-false-positive

I wonder why this rule is triggered and how to fix it properly.

Thanks for reading. I browsed the issue list, but did not find the exact match one. If I missed it or not asking at the right place, please accept my apology and just close this issue.