TypeError：styled_components__WEBPACK_IMPORTED_MODULE_0 __。default.vedio不是对React的函数

在这里，我试图在vedios文件夹中的网页上播放视频。

我安装了npm我的样式组件

index.js：

import React from 'react';
import Vedio from "../../vedios/home_vedio.mp4";
import { HeroContainer, HeroBg, VedioBg } from './HeroElements';

const HeroSection = () => {
    return (
        <HeroContainer>
            <HeroBg> 
                <VedioBg autoPlay loop muted src={Vedio} type = 'vedio/mp4' />
            </HeroBg>    
        </HeroContainer>
    )
}

export default HeroSection

HeroElements.js：

import styled from 'styled-components'
.....
.....
export const VedioBg = styled.vedio `
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    background: #232a34;
`

这是错误：

TypeError：styled_components__WEBPACK_IMPORTED_MODULE_0 __。default.vedio不是一个函数

我的导入部件有任何问题..！？

对于任何建议，我都是新手。