Adding typing to custom xaxis tick component with recharts

Question

I get this message when trying to add a custom xaxis tick component in recharts:

Type '{}' is missing the following properties from '{x: number; y: number; payload: {value: number}}': x, y, payload

I've found examples for other custom components (here's one, here's another), but was unable to figure out how to apply those solutions to a custom tick component. Any ideas how to get rid of the message?

import React from 'react';
import {
  BarChart,
  Bar,
  XAxis,
  ResponsiveContainer,
  Text,
} from 'recharts';


const CustomXAxisTick = ({x, y, payload}: {x: number, y: number, payload: {value: number}) => {
  if (payload && payload.value) {
    return (
      <Text
        x={x}
        y={y}
        ...other stuff
      >
        {payload.value}
      </Text>
    )
..}
}

export const Chart = ({data}) => {
  return (
    <ResponsiveContainer width='100%' height={300}>
      <BarChart>
        <XAxis dataKey='x' tick={<CustomXAxisTick />} /> <--- error message here
      <BarChart>
    </ResponsiveContainer>
  )
}