Recharts: Change z-index of tick text, so that text shows on top of bars - recharts

Question

You can see in the example above that the bars are on top of the text. I am currently solving for this by adjusting the opacity of the bars, but I would really like to just have the text sit on top of the bars.
I have tried using props in the Bar/tick components, as well as using the style attributes, but neither have worked.
Here is my code:
import { FaLock } from "react-icons/fa";
import {
BarChart,
Bar,
Cell,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
Label,
} from "recharts";
export const MonthlyResults = ({ data }) => {
const CustomTick = (props) => {
const { x, y, payload } = props;
return (
<text
x={x + 20}
y={y + 5}
fontWeight={900}
fill="blue"
z={100}
style={{ fontSize: "1.5rem", zIndex: 100 }}
>
{payload.value.replace(/\w\S*/g, function (txt) {
return txt.charAt(0).toUpperCase() + txt.substring(1).toLowerCase();
})}{" "}
({data[payload.index].count})
</text>
);
};
return (
<div className="min-h-fit w-full justify-center bg-gray-200 rounded-md">
<h1 className="text-center text-2xl my-4 font-semibold">
Top 50 Restaurants in NYC
</h1>
<div className="h-[2000px] w-full">
<ResponsiveContainer>
<BarChart
data={data}
layout="vertical"
margin={{ top: 0, right: 0, left: -61, bottom: 0 }}
barCategoryGap="1"
>
<XAxis type="number" hide domain={[0, "dataMax"]} />
<YAxis
yAxisId={0}
type="category"
dataKey="name"
tick={<CustomTick />}
style={{
fontSize: "1rem",
fontWeight: "bold",
}}
/>
<Tooltip content={() => null} />
<Bar
dataKey="count"
onClick={(e) => {
console.log(e);
}}
style={{ zIndex: 50 }}
z={50}
>
{data.map((entry, index) => (
<Cell
cursor="pointer"
key={`cell-${index}`}
fill="rgba(112, 207, 250, 1)"
/>
))}
</Bar>
</BarChart>
</ResponsiveContainer>
</div>
</div>
);
};