Как правильно передать пропсы

У меня есть кнопка, которая меняет состояние у графика, я ее перенес, передал значение через пропсы, теперь она не работает, как правильно это сделать, вот код с первого файла:

import './styles.css'

import { Header } from './Header'
import { ResponsiveLine, ResponsiveLineCanvas } from '@nivo/line'
import { inc } from './utils'
import { generateDrinkStats } from '@nivo/generators'
import { useState } from 'react'

type Flavor = 'svg' | 'canvas'

type ChartProps = {
    flavor: Flavor
    iteration: number
}

console.clear()

const props = {
    enableSlices: 'x',
    margin: { top: 20, right: 20, bottom: 60, left: 80 },
} as const

function Chart({ flavor }: ChartProps) {
    const data = generateDrinkStats(24)

    if (flavor === 'canvas') {
        return <ResponsiveLineCanvas data={data} {...props} />
    }

    return <ResponsiveLine data={data} {...props} />
}

export default function App() {
    const [flavor, setFlavor] = useState<Flavor>('svg')
    const [iteration, setIteration] = useState(inc)

    return (
        <div className='App'>
            <Header {...{ iteration }}/>
            <div className='Chart'>
                <Chart {...{ flavor, iteration }} />
            </div>
        </div>
    )
}

и со второго:

import './styles.css'

import React from 'react'
import { Button } from './Button'
import { inc } from './utils'
import { useState } from 'react'

type iterationProps = {
  iteration: number;
}

export const Header: React.FunctionComponent<iterationProps> = (props) => {

  const [iteration, setIteration] = useState(inc)
  return (
    <div className='header'>
      <Button onClick={() => setIteration(inc)}>Построить график</Button>
    </div>
  )
};