I am making a website, and I really want the website to have good search engine optimization, so that when the user searches for my website on google “jermasearch.com” they get results with multiple clickable links, like these two examples:

But at the moment, my website has the incorrect icon, no search feature, and zero additional clickable links:

I’ve tried using the npm package helmet to give my react app component the meta elements that google indexes, here’s a snippet of my code (full code here)

import React, { useState, useEffect } from 'react';
import { Helmet } from "react-helmet";

...

const JermaSearch = () => {

return (<>
    <Helmet>
        <meta name="google-site-verification" content="8pFA2UWTUXgl_iMCwStnmG332el6U4vIeyyMEGcmG_g" />
        <meta charSet="utf-8" />
        <title>Jerma Search</title>
        <link rel="canonical" href="https://jermasearch.com/" />
        <meta name="description" content="Search through every Jerma985 stream." />
        <meta name="keywords"
            content="Jerma, Jerma985, Jerma search, Jerma stream search, search, logs, stream logs, transcript, subtitles" />
        <meta property="og:title" content="Jerma Search" />
        <meta property="og:description" content="A log of what Jerma has said in chat." />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="https://jermasearch.com/" />
        <link rel="icon" href="jermasearch.ico" />
        <meta property="og:image" content="jermasearch.ico" />
        <script type="application/ld+json">
                    {`
            {
              "@context": "https://schema.org",
              "@type": "WebSite",
              "url": "https://jermasearch.com/",
              "name": "Jerma Search",
              "description": "Search through text of every Jerma985 stream.",
              "potentialAction": {
                "@type": "SearchAction",
                "target": {
                  "@type": "EntryPoint",
                  "urlTemplate": "https://jermasearch.com/jermasearch/search?query={search_term_string}"
                },
                "query-input": "required name=search_term_string"
              }
            }
          `}
                </script>


    </Helmet>

    <div>
        main content here
    </div>>
</>);
}

export default JermaSearch;

And I can see on google search console that my site has been indexed:

Do I need to edit my code and request a new indexing ?