svgタグの画像でinput type="file"の「選択されていません」を置き換える

const FileUpload:React.FC = () => {
    const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        // これで取り出す
        const file: File | undefined = e.target.files?.[0]
    }

    return <>
        <input id={"uploadEventAttachment"} type={"file"} value={''}
               onChange={onChange}
               style={{display: "none"}}/>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
             onClick={() => (document.querySelector("#uploadEventAttachment") as HTMLInputElement).click()}>
            <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"/>
        </svg>
    </>
}

mouseOver時の変化がほしいところ。