I have this vertical barchart working normally.

const data = [
  { name: "Yes", value: 35 },
  { name: "Not sure", value: 21 },
  { name: "No", value: 13 },
];

    <ResponsiveContainer
      width={"100%"}
      height={"100%"}
    >
      <BarChart
        layout="horizontal"
        data={data}
        margin={{
          top: 20,
          right: 20,
          bottom: 20,
          left: 20,
        }}
      >
        <XAxis dataKey={"name"} />
        <YAxis dataKey="value" />
        <Bar dataKey="value" fill="#413ea0" />
      </BarChart>
    </ResponsiveContainer>

However, when changing the layout and the datakey values, the info is not getting displayed properly:

    <ResponsiveContainer
      width={"100%"}
      height={"100%"}
    >
      <BarChart
        layout="vertical"
        data={data}
        margin={{
          top: 20,
          right: 20,
          bottom: 20,
          left: 20,
        }}
      >
        <XAxis dataKey={"value"} />
        <YAxis dataKey="name" />
        <Bar dataKey="value" fill="#413ea0" />
      </BarChart>
    </ResponsiveContainer>

I tried reading the documentation