I just started exploiting react-router and I have a video playing over my page when clicked but then I am trying to add a button to click from the video to navigate back to the home page but couldn't.

    import React from 'react';
    import './About.css';
    import about_img from '../../assets/about_img.jpg';
    import play_icon from '../../assets/play_icon.png';

    const About = ({ setPlayState }) => {
      return (
        <section id='about' className='flexColCenter'>
          <div className='about innerWidth paddings'>
            <div className='about-left'>
              <img src={about_img} alt='' className='about-img' />
              <img
                src={play_icon}
                alt=''
                className='play-icon'
                onClick={() => {
                  setPlayState(true);
                }}
              />
            </div>
            <div className='about-right'>
              <h3>ABOUT LISAM BIOMEDICALS</h3>
              <h2>Leading the Way in IVF Innovation</h2>
            
            </div>
          </div>
        </section>
      );
    };

    export default About;

I tried using useNavigate hook but my problem is that I am unable to place the button within the video container

I just started exploring react-router and I have a video playing over my page when clicked but then I am trying to add a button to click from the video to navigate back to the home page but couldn't.

    import React from 'react';
    import './About.css';
    import about_img from '../../assets/about_img.jpg';
    import play_icon from '../../assets/play_icon.png';

    const About = ({ setPlayState }) => {
      return (
        <section id='about' className='flexColCenter'>
          <div className='about innerWidth paddings'>
            <div className='about-left'>
              <img src={about_img} alt='' className='about-img' />
              <img
                src={play_icon}
                alt=''
                className='play-icon'
                onClick={() => {
                  setPlayState(true);
                }}
              />
            </div>
            <div className='about-right'>
              <h3>ABOUT LISAM BIOMEDICALS</h3>
              <h2>Leading the Way in IVF Innovation</h2>
            
            </div>
          </div>
        </section>
      );
    };

    export default About;

I tried using useNavigate hook but my problem is that I am unable to place the button within the video container