How to add offset to scroll into view with React

Question

I am able to scroll the desired section into view on button click, however it cuts off the heading and I need to add some offset to the position. Here is my code:

import React, { useRef } from 'react'
import Form from '@/components/Form/Form'

export default function index() {
  const ref = useRef(null)
  const scrollToForm = () => ref.current?.scrollIntoView({ behavior: 'smooth' })
  return (
    <div className='px-8 mb-40'>
      <button onClick={scrollToForm}></button>

      <div className='flex flex-col justify-center items-center mv:px-8 md:px-0 mb-12 mt-80' ref={ref} id="reference">
        <h1 className='text-4xl text-center mb-4 w-4/12'>
          Let&#39;s get started
        </h1>
        <p className='text-center mv:w-full sm:w-500'>
          Don&#39;t wait any longer. Fill out the form below and we will review
          your request and respond via email.
        </p>
      </div>
      <Form />
    </div>
  )
}