ReactJS & ApexCharts Candlestick Chart based on API Call not rendering

Hey guys, I'm stuck in React with apexcharts. I want to render a candlestick chart based on data pulled by the api (key is public). The data is stored in usestate, then mapped over and stored in an empty array (couldn't find better solution). For series the format has to be in format [timestamp, [open, high, low, close]] -> Problem is, that every array now contains over 600 datapoints. Can anyone help me out? Because I'm a beginner hints for improving code & best practices are very welcome

import React from "react";
import Chart from "react-apexcharts";

export default function Stockpage(props) {
  const [price, setPrice] = React.useState([]);

  React.useEffect(() => {
    fetch(
      "https://eodhistoricaldata.com/api/intraday/AAPL.US?api_token=OeAFFmMliFG5orCUuwAKQ8l4WWFQ67YX&fmt=json&interval=1h"
    )
      .then((res) => res.json())
      .then((price) => setPrice(price));
  }, []);

  const time = [];
  const o = [];
  const h = [];
  const l = [];
  const c = [];

  price.map(({timestamp, open, high, low, close}) => {
    time.push(timestamp);
    o.push(open);
    h.push(high);
    l.push(low);
    c.push(close);

  });

  // Chart Options
  const series = [
    {
      data: [time, [o, h, l, c]],
    },
  ];
  
  const options = {
    chart: {
      id: "candlestick",
    },
    xaxis: {
      categories: time,
    },
  };

  return (
    <div>
      <Chart options={options} series={series} type="candlestick" width="50%" />
    </div>
  );
}