Try some thing like. (index Route keep it nested)

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
        </Route>
      </Routes>
    </>
  );
}

You need to carefully read the react-router-dom documentation. According to the documentation,

1. You must import {BrowserRouter as Router} from "react-router-dom".
2. You must wrap everything you return inside element.
3. You need to give every component a path to get that element on any action you're intended to get on.

import './App.scss';
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Layout from './Components/Layout';
import Home from './Components/Home';

export default function App() {
  return (
    <Router>    
        <div>
            <Routes>
                 <Route path="/" element={<Layout />} />
                 <Route path="/Home" element={<Home />} />
            </Routes>
      </div>
    </Router>
  );
}


export default App

4. If you want to get a specific component on some action e.g. on click, like inside home component, you first need to import { link } from "react-router-dom" and then use this as used in the code given below:

import LogoTitle from  '../../assets/images/logo-s.png'
import { link } from "react-router-dom"

const Home = () => {
    return (
        <Link to="/">Home</Link> //This must be inside your layout element, 
                                 //because this is your homepage for your 
                                 //website, according to how you have defined 
                                 //your routes.
    );
}


export default Home

try and run please this code block

function App()
{
  return (
    <>
      <Routes>
      <Route path="/layout " element={<Layout />} />
      <Route path="/home" element={<Home />} />
      </Routes>
    </>
    )
}