IDE помечает элемент как неиспользуемый, при том что он используется. JSX

IDE помечает элемент как неиспользуемый, при том что он используется.
Можно заметить, что это происходит только когда в каком-либо объекте есть элемент с таким же именем.

При смене его позиции в коде - он определяется как используемый:

Исходный код:

import React from 'react'
import styled from 'styled-components'

const Elements = {}

Elements.TestText = styled.h1`
    font-size: 30px;
`

const TestText = styled.div`
    background-color: #7ad513;
`

const TestComp = () => (
    <div>
        <Elements.TestText>1</Elements.TestText>
        <TestText>2</TestText>
    </div>
)

Версия IDE:

WebStorm 2018.1.3
Build #WS-181.4892.44, built on May 8, 2018

JRE: 1.8.0_152-release-1136-b38 amd64
JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o
Windows 8.1 6.3