Как я могу использовать 2 компонента в реакции, один в другой?

Question

Мне нужно использовать два компонента, один из которых будет находиться под другим, и мне нужно взаимодействовать с ними. Чтобы быть более конкретным, мне нужно использовать модуль реагировать-частицы-js, но я не могу взаимодействовать с ним. Я уже пытался использовать атрибут css z-index, но он не работает.

import Particles from 'react-particles-js'
import Screens from './screens'
...
class App extends Component {
  render() {
    return (
      <div>
        <Screens /> //this component has all screens of my application, and i use zIndex:'1' into Inputs, TextFields, Buttons and others components of Semantic UI...
        <Particles
          params={params}
          style={{ position: 'absolute', top: '0', zIndex: '0' }}
        />
      </div>
    )


  }
}

class ScreensLogin extends Component {
  ...
  <Form.Group>
  <Form.Input
    style={{ marginBottom: '28px', zIndex: '1' }}
    onChange={this.handleChange("email")}
    autoComplete="on"
    type='text'
    name='email'
    placeholder='Email'
    icon='mail'
    iconPosition='left'
    width={16}
    id='fieldEmail'
  />
</Form.Group>  

что я должен сделать, чтобы этот код работал правильно?