React VictoryLegend background color

I'm trying to set a background color for a VictoryLegend component in ReactJS,

but it appears transparent, Like this -> bar chart

I tried the following:

<VictoryLegend x={320} y={-30}
    gutter={15}
    style={{ border: { stroke: "#212A3E" }, parent: {background: "white"} }}
    colorScale={[ "#F08A5D", "#B83B5E", "#F9ED69", "#6A2C70" ]}
    data={[{name: "1"}, {name:"2"}, {name: "3"}, {name: "4"}]}
/>

i also made sure to write the code after the bar chart, to ensure it appears on top, Like so:

<VictoryChart>
    <VictoryAxis/>
    <VictoryAxis/>
    <VictoryStack>
        .
        .
        .
    </VictoryStack>

    <VictoryLegend/>

</VictoryChart>

You can use borderComponent props in VictoryLegend.

For example:

import { Border } from "victory-core";

<VictoryLegend
  x={320}
  y={-30}
  gutter={15}
  borderComponent={<Border style={{ fill: "white", stroke: "#212A3E" }} />}
  colorScale={["#F08A5D", "#B83B5E", "#F9ED69", "#6A2C70"]}
  data={[{ name: "1" }, { name: "2" }, { name: "3" }, { name: "4" }]}
/>