D3 bars not showing up

[jyang1003]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

My bars for my bar chart are not showing up for some reason

Post any code you think might be relevant (one fenced block per file)

        const renderGraph = () => {
            const w = 600
            const h = 500
            const svg = d3.select(svgRef.current)
                .attr('width', w)
                .attr('height', h)
                .style('overflow', 'visible')
                .style('margin-top', '75px')
                .style('margin-left', '200px')
                .style('margin-bottom', '75px')

            //set scaling
            let xScale = d3.scaleBand()
                .domain(weeklyIntake.map(function(d) { return d.day; }))
                .range([0, w])
                .padding(0.5)
            let yScale = d3.scaleLinear()
                .domain([0, d3.max(weeklyIntake, function(d) { return(d.value) })])
                .range([h, 0])
            //set axis
            let xAxis = d3.axisBottom(xScale)
                .ticks(weeklyIntake.length)
                .tickValues(weeklyIntake.map((object, i) => object.day))
            let yAxis = d3.axisLeft(yScale)
                .ticks(8)
            svg.append('g')
                .call(xAxis)
                .attr('transform', `translate(0, ${h})`)
                // .text('day')
            svg.append('g')
                .call(yAxis)
                // .text(`${capitalizeFirstLetter(whichDisplay)}`)

            //setup svg data
            svg.selectAll('.bar')
                .data(weeklyIntake)
                .enter().append("rect")
                .attr('x', function(d) { return xScale(weeklyIntake.day)})
                .attr('y', function(d) { return yScale(weeklyIntake.value)})
                // .attr('x', (v, i) => xScale(i))
                // .attr('y', yScale)
                .attr('width', xScale.bandwidth())
                .attr("height", function(d) { return height - yScale(d.value); });
                }

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

No error message, bars just don't show up

What is your best guess as to the source of the problem?

either its not getting the data properly or its a timing issue with my useEffect

What things have you already tried to solve the problem?

referenced various other youtube tutorials and online guides