How to Convert TypeScript ES6 into ES5 using Babel

I am building a component library and would like to be able to use this in other places.

I have the following component at src/components/List/List.tsx

import React from 'react'
import styled from '@mui/material/styles/styled'

import MuiList, { ListProps as MuiListProps } from '@mui/material/List'

const ListStyled = styled(MuiList)`
  text-decoration: none;
  cursor: pointer;
`

export const List: React.FC<MuiListProps> = ({ children, ...props }) => {
  return <ListStyled {...props}>{children}</ListStyled>
}

export default List

When running:

rm -rf dist && NODE_ENV=production babel src/components --out-dir dist --copy-files --ignore __tests__,__snapshots__,__mocks__,test.tsx,stories.js

The compiled version is as dist/List/List.tsx:

import React from 'react'
import styled from '@mui/material/styles/styled'

import MuiList, { ListProps as MuiListProps } from '@mui/material/List'

const ListStyled = styled(MuiList)`
  text-decoration: none;
  cursor: pointer;
`

export const List: React.FC<MuiListProps> = ({ children, ...props }) => {
  return <ListStyled {...props}>{children}</ListStyled>
}

export default List

The file is identical. I would like to see dist/List/List.js ideally for my packages to use. But I realise, maybe with TS it cannot work this way, as the interfaces etc will not be used anymore? So logically I believe I would need dist/List/List.js accompanied with dist/List/List.d.ts? If so, how can I do this?

from How to Convert TypeScript ES6 into ES5 using Babel