Passing a React.MutableRefObject to sibling elements - reactjs

Question

I'm sure I'm explaining this wrong but I'm trying to pass a reference to an div that may or may not be there and read that reference in a sibling component.
Let me explain, (test code in it's entirety at the end):
I define a Overlay component that takes a React.MutableRefObject<HTMLDivElement | null> property. It then sets it's returned styled component to this ref. Though this is tricky as I'm only returning the styled div when there are items to display:
return (
overlayItems.length > 0
? (
<StyledOverlay ref={ref}>
{overlayItems && overlayItems.map(i => <p>{i}</p>)}
</StyledOverlay>
)
: (
<div></div>
)
)
I then am trying to read this ref in a sibling component where I simply check if ref.current == null with the actual const refVariable = useRef<HTMLDivElement | null>(null); call in the parent component and refVariablebeing passed into both components.
However, even with items in the overlayItems array, refVariable.current is always equal to null. I'm not sure if this is a side effect of using styled-Components or if this is because I'm passing the reference incorrectly or something else entirely. Can anyone point out my mistake?
(Oh and to add to the matter, I'm using TypeScript)
Full code
import React, { createContext, FC, useCallback, useContext, useRef, useState } from 'react';
import styled from 'styled-components';
export const RefTest = () => {
const refVariable = useRef<HTMLDivElement | null>(null);
return (
<AppState>
<RefReader ref={refVariable} />
<Overlay ref={refVariable} />
</AppState>
)
}
type AppContextValue = {
overlayItems: string[];
addOverlayItem: (newItem: string) => void,
};
const AppContext = createContext<AppContextValue>(undefined!);
const AppState: FC = ({ children }) => {
const [overlayItems, setOverlayItems] = useState<string[]>([])
const addOverlayItem = (newItem: string) => {
setOverlayItems(prev => [...prev, newItem]);
}
return (
<AppContext.Provider value={{
overlayItems,
addOverlayItem,
}} >
{children}
</AppContext.Provider>
)
}
const StyledOverlay = styled.div`
height: 100vh;
width: 100vw;
position: absolute;
top: 0;
left: 0;
`;
type RefProp = {
ref: React.MutableRefObject<HTMLDivElement | null>
}
const Overlay: FC<RefProp> = ({ ref }) => {
const { overlayItems } = useContext(AppContext);
return (
overlayItems.length > 0
? (
<StyledOverlay ref={ref}>
{overlayItems && overlayItems.map(i => <p>{i}</p>)}
</StyledOverlay>
)
: (
<div></div>
)
)
}
const RefReader: FC<RefProp> = ({ ref }) => {
const { addOverlayItem, overlayItems } = useContext(AppContext);
const [result, setResult] = useState("");
const add = () => {
addOverlayItem(`${overlayItems.length + 1} - an item`)
}
const check = () => {
setResult(`the ref current has a current reference: ${!!ref.current}`);
}
return (
<div>
<p>{result}</p>
<button onClick={add} >Add Overlay Item</button>
<button onClick={check} >Check Ref Current</button>
</div>
);
}

Answer 1

The resolution to this ended up being to wrap the two sub components with React.forwardRef(). This caused some havoc with TypeScript trying to understand the reference though and I had to force the type
const RefReader = forwardRef<HTMLDivElement, {}>((_, ref) => {
const { addOverlayItem, overlayItems } = useContext(AppContext);
const [result, setResult] = useState("");
const add = () => {
addOverlayItem(`${overlayItems.length + 1} - an item`)
}
const check = () => {
setResult(`the ref current has a current reference: ${!!(ref as MutableRefObject<HTMLDivElement>)?.current}`);
}
return (
<div>
<p>{result}</p>
<button onClick={add} >Add Overlay Item</button>
<button onClick={check} >Check Ref Current</button>
</div>
);
});