title: Why am I getting parsing error with GlobalStyles in styled-components?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createGlobalStyle } from "styled-components";
  import { GlobalStyles } from "styled-components";
  
  const GlobalStyles = createGlobalStyle`
      @import url('https://fonts.googleapis.com/css2?family=Courgette&amp;display=swap" rel="stylesheet');
  
      * {
          box-sizing: border-box;
      },
  
      body {
          background: #fff;
          color: pink;
          font-family: "Courgette", sans-serif;
          font-size: 1.15em;
          margin: 0;
      },
  
      p {
          opacity: 0.6;
          line-height: 1.5;
      },
  
      image {
          max-width: 100%;
      },
  `;
  
  export default GlobalStyles;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Container } from "./components/styles/Container.styled";
  import Header from "./components/Header";
  import GlobalStyles from "./components/styles/Global";
  function App()
  {
    return (
    &lt;&gt;
    &lt;GlobalStyles /&gt;
    &lt;Header /&gt;
    &lt;Container&gt;
      &lt;h1&gt;Hello World&lt;/h1&gt;
    &lt;/Container&gt;
    &lt;/&gt;)
  }
  export default App;</code></pre>
  </div>
  </div>
  </p>
  <p>I am trying to use GlobalStyles from 'styled-components' and want to change something within it. However, I took this kind of error: I am taking this error when I am trying to use GlobalStyles ERROR in src/components/styles/Global.js</p>
  <p>Line 4:6:  Parsing error: Identifier 'GlobalStyles' has already been declared. (4:6).</p>
  <p>Does anyone know the answer?</p>