I can't figure out for the life of me to pass the data I fetched from my API to the canvas component. It seems to me where the data is available in the handleSubmit() function it is out of scope to the canvas prop. I appreciate any help. Thanks.

I have a datepicker that passes the selected value as a parameter to the API. The data is fetched just fine. I can console.log it but I can't seem to find a way to send the data to my canvas component.

import React, { useState, useEffect } from 'react'
import Layout from '../components/layout'
import Sidebar from '../components/sidebar'
import DatePicker from 'react-datepicker'
import Canvas from '../components/canvas'

import 'react-datepicker/dist/react-datepicker.css'

export default function Ground({ track }) {
  function epoch(date) {
    date = Date.parse(date)
    date = date / 1000
    return date
  }

  const [startDate, setStartDate] = useState(new Date())
  const rightThisSecond = Math.round(Date.now() / 1000)
  const beginDate = Math.round(Date.now(startDate) / 1000)

  const handleSubmit = async (e) => {
    e.preventDefault()
    // console.log(epoch(startDate))

    const beginDate = epoch(startDate)
    // console.log(beginDate)
    // ... submit to API or something
    const res = await fetch(
      `/api/tracks/timeseries/${beginDate}/${rightThisSecond}`
    )
    const track = await res.json()
    // console.log(track)
  }
  return (
    <section>
      <h2>Layout Example (Ground)</h2>
      <form onSubmit={handleSubmit}>
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
        />
        <button type='submit'>Submit</button>
      </form>

      <section>
        <>
          <Canvas data={track} /> // doesn't seem to reach here.
        </>
      </section>
    </section>
  )
}

Ground.getLayout = function getLayout(page) {
  return (
    <Layout>
      <Sidebar />
      {page}
    </Layout>
  )
}