ref attribute in tag is not working, using Typescript + React(with hooks)

I have this component in react:

export function Graph (props: {items: Promise<graphData[]>}) {    const [graphData, setGraphData] = useState([{date: new Date(), value: 10}]);    const refOne = useRef<RefObject<SVGElement>>();    useEffect( () => {        // props.items.then(items => setGraphData(items));        async function getGraphData () {            let items= await props.items;            setGraphData(items)        }        getGraphData();        drawLine(graphData);        drawAxis(graphData, refOne);    });    return (<div className="graph-container"><svg width={width} height={height}><path d={drawLine(graphData)} fill='none' stroke={lineColor}/><g><g ref={refOne}/></g></svg></div>    )}

When I try to reference refOne in my <g> tag typescript throws this error:

Type 'MutableRefObject<RefObject<SVGElement> | undefined>' is not assignable to type 'string | ((instance: SVGGElement | null) => void) | RefObject<SVGGElement> | null | undefined'.  Type 'MutableRefObject<RefObject<SVGElement> | undefined>' is not assignable to type 'RefObject<SVGGElement>'.    Types of property 'current' are incompatible.      Type 'RefObject<SVGElement> | undefined' is not assignable to type 'SVGGElement | null'.        Type 'undefined' is not assignable to type 'SVGGElement | null'.  TS2322    63 |                 <path d={drawLine(graphData)} fill='none' stroke={lineColor}/>    64 |                 <g>> 65 |                     <g ref={refOne}/>       |                        ^    66 |                 </g>    67 |             </svg>    68 |         </div>