re export styled from styled components macro not working

I want to export styled-components/macro from my own .ts file but it is not working.

custom-styled.ts

import styled  from 'styled-components/macro' 

import { ThemeInterface } from './theme'

const {
  css,
  createGlobalStyle,
  keyframes,
  withTheme,
  ThemeProvider,
} = styledComponents as styledComponents.ThemedStyledComponentsModule<ThemeInterface>


export { css, createGlobalStyle, keyframes, ThemeProvider, withTheme }
export default styled

App.tsx: when I import it directly from import styled from 'styled-components/macro' it gives intended debugging features. But when I try from my own file, there is a problem. Thank you beforehand.

I tried with export { css, createGlobalStyle, keyframes, ThemeProvider, withTheme, styled }. But without success.

import React from 'react';
import styled from './custom-styled'

const StyledContainer = styled.div`
background: black;
`
const StyledSpan = styled.span`
  color: white;
  font-size: 20px;
`

function App() {
    return (
        <StyledContainer>
            <StyledSpan>
                Test
            </StyledSpan>
        </StyledContainer>
    );
}

export default App;

from re export styled from styled components macro not working