How can i access the parent component div ref from nested child component.

App.js

const appRef = useRef()

  <div ref={appRef}>
    <div>
      <Switch>
        <PrivateRoute path="/products">
          <Products />
        </PrivateRoute>
      </Switch>
    </div>
  </div>

Products.js

componentDidMount(){
    console.log(this.props.innerRef) // undefined 
  }

  render(){
    return (
      <PopUp />
    )
  }

PopUp.js

const PopUp = forwardRef(function PopUp(props,ref){
    console.log(ref) // null 
    console.log(ref?.current?.offsetWidth) // undefined
  })