nextjs 将数据传递给组件

我一生都无法将我从 API 获取的数据传递给画布组件。在我看来，数据在handleSubmit()函数中可用的地方超出了画布道具的范围。我很感激任何帮助。谢谢。

我有一个日期选择器，它将所选值作为参数传递给 API。数据被提取得很好。我可以console.log，但我似乎找不到将数据发送到我的canvas组件的方法。

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>
  )
}