I’m trying to get rid of the error occurring when im accessing .current from mainContainer passed from the App component, the error says “Property ‘current’ does not exist on type ‘((instance: unknown) => void) | MutableRefObject’.
Property ‘current’ does not exist on type ‘(instance: unknown) => void’.ts(2339)
any”, but it actually exists and I can access it.

//parent App component

import Navbar from "./components/Navbar.tsx"
import app from "./App.module.css"
import { useRef } from "react"

function App() {
  const mainContainer = useRef<HTMLDivElement | null>(null);

  return (
    <>
      <div id={app.mainContainer} ref={mainContainer}>
        <button className="nav-btn" id="open-nav-btn">Menu</button>
        <Navbar ref={ mainContainer } />
      </div>
    </>
  )
}

export default App





//child component
import  "./navbar.css"
import { gsap } from "gsap";
import { useGSAP } from "@gsap/react";
import { forwardRef, useRef } from "react";
import { ExpoScaleEase } from "gsap/EasePack";
gsap.registerPlugin(useGSAP,ExpoScaleEase);


const Navbar = forwardRef(function Navbar( props , ref ) {
  const navContainer = useRef(null);
  const mainContainer = ref;
  
  const { contextSafe } = useGSAP({ scope: navContainer });

  const closeNav = contextSafe(() => {

  const duration : number = 0.4;

  if(mainContainer && navContainer){
    
    gsap.set(
      mainContainer.current,
      {
        overflow: "auto",
      });  
    
    gsap.to(
      navContainer.current,
      {
        opacity: 0,
        ease: "power2.in",
        duration: duration
      }
    );
  
    gsap.set(
      navContainer.current,
      {
        clipPath: "inset(100% 0% 0% 0%)",
        delay: duration   
      }
    );
  
    gsap.set(
      navContainer.current,
      {
        display: "none",
        delay: duration  
      },
    );
    
      gsap.set(
        navContainer.current,
        {
          display: "none",
          delay: duration  
        }
      );
  }

});

  
  return (
     <div id="nav-container" ref={navContainer}>
        <button className="nav-btn" id="close-nav-btn" onClick={closeNav}>Close</button>
        <div className="nav-wrapper">
          <nav>
            <ul className="nav-pages">
              <li>HOME</li>
              <li>ABOUT</li>
              <li>CONTACT</li>
              <li>PROJECTS</li>
            </ul>
            <hr />
            <ul className="nav-socials">
              <li>Instagram</li>
              <li>Linkedin</li>
              <li>Github</li>
            </ul>
        </nav>
        <p>Mirko Bellopede <br /> Full stack web developer Portfolio 2024 ©</p>
        </div>
      </div>

  )
});


export default Navbar

I’ve already tried to specify the type as refobj<HTMLDivElement> with no results.