React Router Dom Blank Screen While Compiling

I am building a Music Streaming Application, that works as a streaming services for 4 playlists. The names of these playlists are Metal, Rock, Rap, House. I have created individual files for them named, Metal.js, Rock.js, Rap.js, House.js. These four playlists are nested on my Home.js page.

Question#1:

The part I’m stuck on is routing a button link from Home.js to either of the playlists. I followed a tutorial on how to use react-router-dom, however when I implemented it on my code, I was returned with a blank screen.

What’s wrong with it?

The Code:

Home.js

import React, { Component } from 'react';
import '../components/Home.css';
import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
  } from "react-router-dom";
  import Rap from './Rap';
  import House from './House';
 import Metal from './Metal';
 import Rock from './Rock';

export default class Home extends Component{
   
    render(){
        return(
            <Router>
            
            <div> 
                <h1> Home</h1>
                <img src={process.env.PUBLIC_URL + '/things.png'} alt="things" />

<button>
<Link to="/metal">
     <button type="button">
          Click Me!
     </button>
 </Link>
</button>
<button>
<Link to="/rap">
     <button type="button">
          Click Me!
     </button>
 </Link>
</button>
<button>
<Link to="/rock">
     <button type="button">
          Click Me!
     </button>
 </Link>
</button>
<button>
<Link to="/house">
     <button type="button">
          Click Me!
     </button>
 </Link>
</button>

            </div>
        <div>
        <Routes>
      <Route path="/S" element={<S/>} />
      <Route path="/Rock" element={<Rock />} />    
      <Route path="/House" element={<House />} />   
      <Route path="/Rap" element={<Rap />} />   
    </Routes>
        </div>
        </Router>
            
        )
    }
}

Additionally I will include one of the playlist components(they are all the same).

House.js

import React, { Component } from 'react';

export default class House extends Component{
    render(){
        return(
            <div> 
                <h1> HOUSE</h1>
              
            </div>
        )
    }
}

Thank You!