Cannot find module ‘styled-components/macros’ or its corresponding type declarations.ts(2307)

First let me take you through the issue.I created the react app using CRA. I am using a routing and rendering the component based on the routing. It is working perfect, no issues there. But, a random div with some random className is getting added. It is not taking 100% height of the parent. So, styling is becoming an issue. When I googled about this random classNames, it is said that they are being added because to prevent duplicate classNames. But, for the solution I saw a blog that said use styled-components/macro and there will be more meaningful classNames which will be helpful. And when I am doing that, I am facing the above error. I also tried installing styled-components/macros. I was unable to install styled-component/macros as there was some git error despite successful login. I also tried ‘npm i babel-plugin-macros’. babel-plugin got installed but still I am unable to import from /macros.

App.js

<BrowserRouter>
  <div className="App">
    <header className="App-header">
      {/* Code */}
    </header>
    <main>
      {/* Code */}
    </main>
  </div>
</BrowserRouter>

package.json
"babel-plugin-macros": "^3.1.0",

Component.styled.ts
import styled from 'styled-components/macros';

<div class = "App"
<main class="main-div-container"><div class="sc-eqUzNf cNQqDT"> Rendered component here</div></main>
</div>

In Short: I created a react-app using create-react-app. I am rendering component based on routing (using react-router-dom). Component is rendering based on the route but a random div with a random className is getting added which I am unable to access and due to that, I am unable to style the component. Thank you in advance