React Recharts graph not showing

Question

Hi im trying to create charts from https://recharts.org/en-US/examples/AreaChartFillByValue

but once i run the code my page just becomes white and everything disappears. can anyone help out. i just copied the code given in example.

EDIT: i found out that ResponsiveContainer messes up everything if i remove it and leave areachart works properly, but i want to keep it responsive, how can i give width=100% without messing up

<ResponsiveContainer width="100%" height="100%">
    <AreaChart
      width={500}
      height={400}
      data={data}
      margin={{
        top: 10,
        right: 30,
        left: 0,
        bottom: 0,
      }}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis />
      <Tooltip />
      <defs>
        <linearGradient id="splitColor" x1="0" y1="0" x2="0" y2="1">
          <stop offset={off} stopColor="green" stopOpacity={1} />
          <stop offset={off} stopColor="red" stopOpacity={1} />
        </linearGradient>
      </defs>
      <Area type="monotone" dataKey="uv" stroke="#000" fill="url(#splitColor)" />
    </AreaChart>
  </ResponsiveContainer>