Изменение входного значения вызывает импорт шрифта

Я работаю с reactjs и styled-components. У меня есть InputComponent, который содержит styled.input. Мой родительский компонент содержит этот компонент Input, const styled.h1 и компонент кнопки.

Мой родительский рендер выглядит так:

  render() {
    return (
      <Div>
        <GlobalStyle/>
        <H1>Hallo</H1>
        <MyInput value = {this.state.value} onChangeValue = {this.handleChangeEventValue} />
        <br/><MyButton msg = {this.state.value}/>
      </Div>
    );
  }

Возможно, вы заметили компонент GlobalStyle. Компонент GlobalStyle взят из стилизованных компонентов и предоставляет наследуемые стили. Это выглядит так:

const GlobalStyle = createGlobalStyle `
  body {
    @import url('https://fonts.googleapis.com/css?family=Lato');
    font-family: 'Lato',sans-serif;
  }
`

Моя проблема: Шрифт изначально работает, но когда я что-то набираю в поле ввода, он повторно загружает шрифт и сбрасывает мой h1. Вживую это выглядит так, будто он становится жирным и не жирным, но его просто меняют шрифты.

После нескольких букв моя сетевая отладка выглядит так: Сетевой образ

Спасибо, что помогли мне.

Проект https://codesandbox.io/s/github/robertdudaa/reactjstest