How to upload and play songs in react js using hooks?

I have a component here that should allow a user to play the current songs and add new ones from their computer. This is the code

import React, {useState} from 'react';

const SongListUI = () => {

    const [songs, setSongs] = useState([])
    const [oneSong, setSong] = useState('')
    const [Artist, setArtist] = useState('')
    const [src, setSrc] = useState('')

    const addSong = (oneSong, Artist) =>{
        setSongs([...songs, {title: oneSong, artist: Artist, source: src, id: Math.random(0,1)}])
    }



    const handleSubmit = (e) =>{
        e.preventDefault()
        addSong(oneSong, Artist, src)
    }

    return ( 
        <div className="hi">
            {
                songs.map(song =>{
                    return(
                        <div key={song.id}>
                            <h4>{song.title}</h4>
                            <audio controls>
                                <source src={song.source} type="audio/mpeg" />
                            </audio>
                            <h3>{song.artist}</h3>
                        </div>
                    )
                })
            }

            <form onSubmit={handleSubmit}>
                <label>addSong</label>
                <input type="text" value={oneSong} onChange={(e) => setSong(e.target.value)}/>
                <input type="text" value={Artist} onChange={(e) => setArtist(e.target.value)}/>
                <input type="file" value={src} onChange={(e) => setSrc(e.target.value)}/>
                <input type="submit" value="Add a Song"/>
            </form>


        </div>
     );
}

export default SongListUI;

The problem is whenever I try to upload an mp3 file from my computer through the file input I get an error :Not allowed to load local resource: file:///C:/fakepath/Black%20Sabbath%20-%20Paranoid%20(Full%20Album).mp3 How can I solve that?