How to set root directory for webpack.config.js?

Question

typescript

Good day
The bottom line is that I want to connect a storybook for my react project on typescript
I read the documentation for storybook, what config is needed for a typescript project
Everything is fine, everything worked, there is only one "but":

Module not found: Error: Can't resolve 'theme' in 'E:\projects\projectName\src\components\common\ButtonPrimary'

Here is the code for this little component:

// use styled-components
import styled from 'theme'

const ButtonPrimary = styled('button')`
  border-radius: 4px;
  height: 56px;
  background-color: transparent;
  font-size: ${props => props.theme.sizes.text.extraLarge};
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  background-color: ${props => props.theme.colors.primaty};
  border: solid 1px ${props => props.theme.colors.primaty};
  color: ${props => props.theme.colors.default};
  &:hover {
    background-color: ${props => props.theme.colors.darkPrimary};
  }
`

export default ButtonPrimary

If I menu the path as in the example below, then everything works. I understand that I need to designate the root directory for the webpack config (or something like that). How can i do this? I looked at how it is implemented (I believe) in react-scripts-ts, but it only generated new webpack.config.js errors
import styled from '../../../theme'

const path = require('path')
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin')
const include = path.resolve(__dirname, '../src')

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader'),
    include,
  })
  config.plugins.push(new TSDocgenPlugin()) // optional
  config.resolve.extensions.push('.ts', '.tsx')
  return config
}

Same file structure: