why am i getting a 404 for this svg in nextjs?

I have two svg files called play.svg and pause.svg that are being used in another file called index.js. The directory looks like this:

app
 components
  index.js
 pages
  _app.js
 public
  play.svg
  pause.svg

In index.js is this:

import Image from 'next/image'
export default class Player extends Component {
 render() {
   return (
    <Image
     className="play-button"
     src={`/${isPlaying ? '../public/pause' : '../public/play'}.svg`}
     width="140"
     height="140"
     onClick={togglePlayPause}
    />
   )
 }
}

In _app.js is this:

import Player from '../components/player'
function MyApp({ Component, pageProps }) {
 <Player />
}
export default MyApp

This results in a 404 for both svg files: GET http://localhost:57739/public/play.svg 404 (Not Found)

Why is this http://localhost:57739/public/play.svg returning a 404?