I am new to React, and am trying to call a function which acts as a component, but returns two values, one called 'render' which just returns a component wrapped in a div, and another called sliderVal, which is an internal state value of that slider. Below is code from MySlider.js

function MySlider(props) {
  const [sliderVal, setSliderVal] = useState(1);

  return{ 
    render:(
    <div>

<Grid container justify = "center">
<Box sx={{ width: 250 }}>
      <Typography id="input-slider" gutterBottom>
        {props}
      </Typography>
      <Slider
  defaultValue={1}
  valueLabelDisplay="auto"
  step={1}
  value={sliderVal}
  marks
  min={1}
  max={10}
  onChange={(_, newValue) => setSliderVal(newValue)}
/>
    </Box>
    </Grid>
    </div>
  ),
  sliderVal
}

In my App.js, I am using the following code to render two sliders, and pass their values into another component.

  var {render, sliderVal} = MySlider("Number of Paragraphs");
  var {render1, sliderVal1} = MySlider("Number of Words");

The first one works just fine, I can use {render} to render the slider, and {sliderVal} to access its value and pass into another component. However the 2nd one does not work and nothing renders. When I console.log render1 and sliderVal1, they are both undefined. Any insight is greatly appreciated!