title: react section displayed as div
body: <p>I tried to apply a style to a section using the styled-components module in react.<br />
  However, the style was not applied to the section, so I checked it and it is displayed as a div on the console.</p>
  <pre><code>// GlobalStyles.tsx
  section {
    width: 100%;
    height: 100%;
    display: flex;
  }
  </code></pre>
  <pre><code>// Login.tsx
  import styled from 'styled-components';
  
  const Section = styled.section`
    background-color: #ff69b4;
  `;
  
  const SERVER_ENDPOINT = 'http://localhost:3001';
  
  function Login() {
    ...
    return (
      &lt;Section&gt;
        &lt;form&gt;
          &lt;input
            type=&quot;text&quot;
            value={email}
            onChange={(e) =&gt; setEmail(e.target.value)}
          /&gt;
          &lt;input
            type=&quot;password&quot;
            value={password}
            onChange={(e) =&gt; setPassword(e.target.value)}
          /&gt;
          &lt;input type=&quot;submit&quot; value=&quot;Login with Spotify&quot; onClick={handleLogin} /&gt;
        &lt;/form&gt;
        &lt;span&gt;{errorMsg}&lt;/span&gt;
        &lt;Link to=&quot;/join&quot;&gt;Sign Up&lt;/Link&gt;
      &lt;/Section&gt;
    );
  }
  
  export default Login;
  
  </code></pre>
  <p><a href="https://i.stack.imgur.com/13sba.png" rel="nofollow noreferrer">console html</a></p>
  <p>how should i solve this problem?</p>