How to use the recharts.Tooltip.propTypes function in recharts

import {format as formatDate, subMonths, subDays, subHours, subMinutes, getDaysInMonth} from 'date-fns';
import {formatCurrency} from '../util';
import './TimeSeriesChart.scss';

const CustomTooltip = ({payload}) => {
	// It's sometimes empty…
	if (!(payload && payload.length > 0)) {
		return null;
	}

	return (
		<div>{formatCurrency(payload[0].payload.value)}</div>
	);
};

CustomTooltip.propTypes = Tooltip.propTypes;

const resolutionToLabelFormat = new Map([
	['hour', 'HH:mm'],
	['day', 'HH:mm dddd'],
	['week', 'dddd DD/MM'],
	['month', 'DD/MM'],
	['year', 'MMMM'],
	['all', 'MMMM YYYY'],
]);

const makeTicks = (count, fn) =&gt; {
	const now = new Date();
	return [...new Array(count).keys()].map(index =&gt; fn(now, index)).reverse();
};

const getTicks = resolution =&gt; {

import './PieChart.scss';

const CustomTooltip = ({payload}) => {
	// It's sometimes empty…
	if (!(payload && payload.length > 0)) {
		return null;
	}

	const [data] = payload;

	return (
		<div>{data.name}: {formatCurrency(data.value)}</div>
	);
};

CustomTooltip.propTypes = Tooltip.propTypes;

const PieChart = () =&gt; {
	const {state: appState} = appContainer;
	const {currencies} = appState;

	const data = currencies.map(currency =&gt; ({
		name: currency.symbol,
		value: currency.cmcBalanceUsd,
	}));

	let PieChart = () =&gt; (

// TODO(sindresorhus): The default behavior of tooltips is to follow the mouse.
// We should make it static: https://github.com/recharts/recharts/issues/488

const CustomTooltipContent = ({payload}) => {
	// No idea why it's sometimes empty
	if (payload.length === 0) {
		return null;
	}

	return (
		<div>{formatCurrency(payload[0].payload.price)}</div>
	);
};

CustomTooltipContent.propTypes = Tooltip.propTypes;

const DepthChart = props =&gt; {
	let {bids, asks} = props;

	const getDepths = orders =&gt; orders.map(order =&gt; order.depth);
	const maxDepth = Math.max(...getDepths(asks), ...getDepths(bids));
	const isEmpty = bids.length === 0 &amp;&amp; asks.length === 0;

	// We still supply values when it's empty so it will show the left/right border
	bids = bids.length &gt; 0 ? bids : [{price: 0, depth: 0}];
	asks = asks.length &gt; 0 ? asks : [{price: 0, depth: 0}];

	bids = _.orderBy(bids, ['depth'], ['desc']);
	asks = _.orderBy(asks, ['depth'], ['asc']);
	bids = roundPrice(bids);
	asks = roundPrice(asks);