Flow JSX attributes weirdness

.flowconfig

[ignore]

[include]

[libs]

[options]

foo.js

/* @flow */

import React from "react";

type Foo = { bar: string };

class FooItem extends React.Component {
    props: Foo;

    render(): ReactElement {
        return (
                <span>{this.props.bar}</span>
        );
    }
}

class FooWrapper extends React.Component {
    render(): ReactElement {
        return (
            <div>
                <FooItem bar={42} />
            </div>
        );
    }
}

fooItem.js

/* @flow */

import React from "react";

type Foo = { bar: string };

export default class FooItem extends React.Component {
    props: Foo;

    render(): ReactElement {
        return (
                <span>{this.props.bar}</span>
        );
    }
}

fooWrapper.js

/* @flow */

import React from "react";
import FooItem from "./fooItem";

class FooWrapper extends React.Component {
    render(): ReactElement {
        return (
            <div>
                <FooItem bar={42} />
            </div>
        );
    }
}

When running Flow on these files, I expect to get the same type error in foo.js as in fooWrapper.js, namely:

 10:                 <FooItem bar={42} />
                     ^^^^^^^^^^^^^^^^^^^^ React element `FooItem`
 10:                 <FooItem bar={42} />
                                   ^^ number. This type is incompatible with
  5: type Foo = { bar: string };
                       ^^^^^^ string. See: fooItem.js:5

Instead, with Flow 0.20.1, I get the following error:

  8:     props: Foo;
                ^^^ property `bar`. Property not found in
 21:                 <FooItem bar={42} />
                     ^^^^^^^^^^^^^^^^^^^^ type parameter `Props` of React element `FooItem`