Not able to use a custom component with VictoryBar in VictoryStack

**Describe the bug**
A clear and concise description of what the bug is.
I am trying to use VictoryBar in another component to load data for each bar separately and make use of that component in the VictoryStack when I try to do that code does nothing. I added a sample code in Code Sandbox link to show this issue.

**Victory version**
Which npm version are you using?
6.14.15

**Code Sandbox link**
Please include a code sandbox link or a similar reproduction if possible.
https://codesandbox.io/s/victory-var-test-7hw4yf

**To Reproduce**
Steps to reproduce the behavior:
added a Code Sandbox link.

**Expected behavior**
A clear and concise description of what you expected to happen.
I am expecting VictoryBar to load on the stack.

**Screenshots**
If applicable, add screenshots to help explain your problem. (You can exclude this if you included a reproduction)

**Desktop (please complete the following information):**
- OS: macOS
- Browser : Chrome
- Version : 111.0.5563.146

**Smartphone (please complete the following information):**
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]

**Additional context**
Add any other context about the problem here.