"Property does not exist on type" using styled-components in .tsx file - reactjs

Question

I'm attempting to incorporate Styled-Components into a React project using TypeScript. Constructing the component immediately highlights div with the error:
Property 'div' does not exist on type 'typeof import("/Users/admin/node_modules/style-components/dist/index")'.ts(2339)
This is my code:
// App.tsx
import React from 'react'
import './App.css'
import styled from 'style-components'
const StyledDiv = styled.div`
display: flex;
`
const App: React.FC = () => {
return (
<div className="App">
<StyledDiv>
<h1>Testing</h1>
</StyledDiv>
</div>
)
}
Strangely, if I create that styled component in its own .ts file, export it, and import it into .App.tsx it will work just fine. Are styled components only meant to be imported and not used directly in a .tsx file?
My package.json file for informational purposes.
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.6"
},
"devDependencies": {
"#types/react": "^18.0.24",
"#types/react-dom": "^18.0.8",
"#types/styled-components": "^5.1.26",
"#vitejs/plugin-react": "^2.2.0",
"typescript": "^4.6.4",
"vite": "^3.2.3"
}
}

Answer 1

I did more testing and created a new component file and immediately I was met with a type error. I started over with a new project folder and used Yarn instead of NPM (which is what I was previously used to). The problem hasn't shown up again.