So I have typescript react project where I want to observe certain child components being viewed, to achieve this I am using IntersectionObserver and refs. In my parent component I have an introduction component imported from another file and I am trying to pass introRef into the component to be used to reference elements in Introduction

introRef = useRef(null)
...
<Introduction ref={introRef} />

My Introduction component is defined as follows:

import React, { forwardRef, LegacyRef } from "react";
import myInfo from "../myInfo.json";


const Introduction = forwardRef<HTMLElement, React.HTMLProps<HTMLElement>>((ref) => {
    return (
      <section ref={ref} className="Introduction">  
          <p className="greeting">Welcome</p>
          <p className="intro">{myInfo.introduction}</p>
          <div className="picture">
          {/* <PixelateToUnpixelate src={myInfo.myPicture} /> */}
          </div>
      </section>
    );
  });
  
  export default Introduction;

on the line : <section ref={ref} className="Introduction"> I am getting the error:
Type ‘HTMLProps’ is not assignable to type ‘LegacyRef | undefined’

To combat the issue I have tried changing the declaration of Introduction to the following

const Introduction = forwardRef((ref:LegacyRef<HTMLElement>) => {
    return (
      <section ref={ref} className="Introduction">  
          <p className="greeting">Welcome</p>
          <p className="intro">{myInfo.introduction}</p>
          <div className="picture">
          {/* <PixelateToUnpixelate src={myInfo.myPicture} /> */}
          </div>
      </section>
    );
  });

The issue here disappeared, but when I try to use the Introduction component in the parent component and pass pass introRef into Introduction I am getting the error:

Type '{ ref: MutableRefObject<null>; }' is not assignable to type 'IntrinsicAttributes & (LegacyRef<HTMLElement> & RefAttributes<unknown>)'.
  Property 'current' is missing in type '{ ref: MutableRefObject<null>; }' but required in type 'RefObject<HTMLElement>'

So again I changed my Introduction component code to:

const Introduction = forwardRef((ref:React.MutableRefObject<null>) => {
    return (
      <section ref={ref} className="Introduction">  
          <p className="greeting">Welcome</p>
          <p className="intro">{myInfo.introduction}</p>
          <div className="picture">
          {/* <PixelateToUnpixelate src={myInfo.myPicture} /> */}
          </div>
      </section>
    );
  });

Now, I am getting this error when I try to pass introRef into Introduction:

Property 'current' is missing in type '{ ref: MutableRefObject<null>; }' but required in type 'MutableRefObject<null>'.

I am out of ideas on how to solve this as from the documentation from React useRef:

current: Initially, it’s set to the initialValue you have passed. You can later set it to something else. If you pass the ref object to React as a ref attribute to a JSX node, React will set its current property.

So I can’t possibly have the current property if I don’t pass the ref object to a ref attribute to a JSX node, in this case Introduction.

I have also tried doing this without wrapping Introduction in forwardRef, similar issues arose.

What am I doing wrong, how do I create a ref and pass it to a child component in typescript React and please provide an explanation, thank you