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

[redeyes2015]

  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.

[ljharb]

I agree, this is a false positive.

[doublethefish]

Seen in v7.25.1

[Samuel-Therrien-Beslogic]

Not sure if related to the same issue, but this gives me a false positive for account as well:

type MessageElementProps = {
  message: Message
  account: Account
}
const SelfMessage = (props: MessageElementProps) =>
  <Stack
    flexDirection='row'
    justifyContent='flex-end'
    key={props.message.id ?? props.message.createdAt.toString()}
    spacing={1}
  >
    <Stack>
      {props.message.status === MessageStatus.Read &&
        <DoneAllIcon />}
      <Paper sx={{
        maxWidth: MESSAGE_MAXWIDTH,
        padding: PADDING,
        backgroundColor: backgroundColor(props.message.status),
        color: theme => theme.palette.primary.contrastText,
      }}
      >
        {props.message.content}
      </Paper>
      {props.message.status === MessageStatus.Error &&
        <Typography variant='helperText'>
          <WarningIcon />
          Message not sent. Click to retry. (Not yet implemented)
        </Typography>}
    </Stack>
  </Stack>

const CorrespondantMessage = (props: MessageElementProps) =>
  <Stack
    direction='row'
    key={props.message.id ?? props.message.createdAt.toString()}
    spacing={1}
  >
    <AccountAvatar account={props.account} size={42} />
    <Paper sx={{
      maxWidth: MESSAGE_MAXWIDTH,
      padding: PADDING,
      backgroundColor: 'background.input',
    }}
    >
      {props.message.content}
    </Paper>
  </Stack>

[I-GiM]

I get this error in my components too. Are there any fixes for this? Is there a way to disable it from the eslint config file?
The only thing that seems to work is not to destructure the map object and disabling the error with a comment.