I had been investigating throug videos/content and I couldn't find a complete example about How-To build a simple Bar chart with "react-d3-library", all I could find was about getting D3 code and convert it to React. Even those guides were unhelpful.

Thanks in advance...

This is a very simple component implementation of react-d3-library to display a Bar chart but something is missing and I don't know what it is. It doesn't crash but simply doesn't show anything.

What is missing? See it at stackblitz (The code does not follow good practices with the purpose to be simple and basic pursuit an educational goal)

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import rd3 from 'react-d3-library'
import './App.css';

const BarChart = rd3.BarChart;

function App() {
  const [state, setState] = useState({d3: ''})
  
  useEffect(() => {

    (async () => {
      let data = {}
      data.width = 500;
      data.height = 750;
      data.margins = {top: 20, right: 10, bottom: 0, left: 10}
      data.yAxisLabel = 'Y VALUE';
      data.ticks = 10;
      data.barClass = 'barChart';
      data.dataset = []
      const response = await axios(`https://apidatos.ree.es/es/datos/demanda/evolucion?start_date=2022-01-01T00:00&end_date=2022-03-06T23:59&time_trunc=day`)
      const values = response.data.included[0].attributes.values
      values.forEach(item => (data.dataset.push({label: item.datetime.split("T")[0],value:item.value})))
      console.log("values",values)
      console.log("data.dataset",data.dataset)
      setState({d3:data})
    })()
  
  },[])

  return (
    <div className="App">
      <header className="App-header">
        {
          Object.keys(state.d3).length
            ? <BarChart data={state} />
            : "null"
        }
      </header>
    </div>
  );
}

export default App;