How do I scroll into a item in a list by search operation using react?

So, I made a react app that displays a list of items from a json file as in the pic. I want to implement a search feature where i can enter the name and it checks for the name in list and scrolls to it.

A person told me about scroll-into-view , but I'm not understand how to make it compare the search term to the names in list.

My App.js code

import React,{useState} from 'react';
import Notes from './Notes';
import './App.css';

function App() {

  const [notes] = useState([]);
  const handleSubmit= ()=>{
      //Upon submitting I want the search functionality to be implemented here . If thats the way to do it.
  }

  return (
    <div className="App">

      <div className="App-header">  
        <form><input type="text" placeholder="Start Typing.." onSubmit={handleSubmit} ></input></form>
        <div className="pageTitle">Song Notes :</div> 
        <Notes thisNotes={notes}/>   
      </div>

    </div>
  );
  }

export default App;

My Notes.js code:

import React from 'react';
const Notes = ({notes})=>{
    const jsonNotes = require('./Notes.json');
    const songNotes = jsonNotes.map(note => {
        return(
            <div key={note.id}>
            <li class="noteAsList">

            <div className="songTitle">{note.Name}</div>

            <pre><br></br>{note.Notes}</pre>
            </li>
            </div>
        )
    })

    return(
        <div className="noteStyle">
          {songNotes} 
        </div>
    )
}

export default Notes;

I'm looking to implement such a feature. Either scrolling into view in the page or just displaying the item I asked for.

Thanks for the help in advance.