Как удалить дочерний элемент div в реакции с помощью хука useRef?

Я хочу удалить старый SVG и создать новый SVG при каждом изменении значения chart_data.

import React, {useRef, useEffect, useState} from 'react'
import * as d3 from 'd3'
import { useSelector} from "react-redux";

const Barchart = () =>{
    const chart = useRef(null);
    const chart_data= useSelector(state => state.ChartReducer);

    useEffect(() => {
        let svg = d3.select(chart.current)
        //code to create the chart
        //
        return () => {
            //How to remove the old svg element from the ref chart.current?
            //I tried
            chart.current.removeChild() // This throws an error saying expects 1 argument got 0

        }
    },[chart_data])

    return(
       <div className = "bar-chart" ref = {chart}></div>
    )

}

export default Barchart

chart.current.removeChild() не удаляет детей <div className = "bar-chart" ref = {chart}></div>

Как удалить все дочерние элементы div со ссылкой на useRef?