Why SEO analytics doesn't recognize h1 in my React app?

Question

I am doing my first React app which I want to deploy. I have a problem regarding h1 (and h2) elements which are not recognized by SEO analytics, although I put them on components, so SEO ranking is quite low because of that. What I should do? Here is my HomeComponent, other components are similar.

import React, { useState, useEffect } from 'react';
import '../App.css';
import image from '../assets/top/1.jpg';
import TopImage from './TopImage';

const HomeComponent = () => {
    const [animate, setAnimate] = useState(false);

    useEffect(() => {
      setAnimate(true);
    }, []);

    return (
    <div className="main_content">
        {/* <div className="top-image"></div> */}
        <TopImage selectedImage={image} />
        <h1>Welcome!</h1>
        <div className="container">
            <div className={`box left ${animate ? 'enter' : 'left-enter'}`}>
                <p>Welcome to page...</p>
            </div>
            <div className={`box right ${animate ? 'enter' : 'right-enter'}`}>
                <img src={image} alt="Image of roadworks." style={{ width: '100%', height: 'auto' }} />
            </div>
        </div>
    </div>
    );
}

export default HomeComponent;