Add Scroll and Submit Button

You are provided with a React component named `LocationSelecting` that manages commodity location placements with dynamic bins and quantities, using Material-UI components, Redux state, Formik form handling, and animation with Lottie. Your task is to enhance this component by: 1. Adding a **Submit** button fixed at the bottom of the component, which triggers form submission logic (e.g., calling `formik.handleSubmit`) or a handler passed as props. 2. Modifying the input section (the area where the location rows and quantity inputs are displayed) to have a fixed height with vertical scrolling enabled so that when content overflows, the user can scroll without the entire component growing beyond this height. ### Requirements: - The Submit button must be visually distinct and remain fixed at the bottom, regardless of the scroll position within the input section. - The input section containing the mapped locations must have a fixed height (e.g., around 300-400px) with overflow-y set to scroll. - The scrolling area should be styled so it integrates well with the overall UI (using MUI `Box` or equivalent) and should not interfere with the top header or submit button. - Assume `formik` instance passed via props is used to handle form state and submission. - Preserve all existing logic and styling. ### Steps: 1. Wrap the locations mapping section inside a container with fixed height and `overflowY: 'auto'`. 2. Add a Box or Grid container below the scrollable section containing a full-width Submit button that calls `formik.handleSubmit` or another provided submit handler. 3. Ensure the layout uses flex or stack styles so that scroll area and submit button coexist without layout breakage. ### Output Format Return the full updated React component source code for `LocationSelecting` including these enhancements, keeping all existing imports and logic intact, only adding the fixed height scroll for the input section and the fixed bottom submit button. ### Example snippet to add scroll: ```jsx <Box sx={{ maxHeight: 350, overflowY: 'auto', mt: 2 }}> {/* Map over locations here */} </Box> ``` ### Example snippet for submit button fixed at bottom: ```jsx <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: 'white', p: 1, borderTop: '1px solid #ccc' }}> <Button variant="contained" fullWidth onClick={formik.handleSubmit}> Submit </Button> </Box> ``` Incorporate these patterns into the component and ensure seamless user experience. ---