I've been working on simplifying my code and am curious how I would approach passing a secondary value using props and fetching data from the back end. I'm using material UI's Autocomplete and the PERN stack. Everything is working, except I want to change "region_name" to be a prop. So I can change the values dynamically within event details.js. when I'm fetching other data.

I currently have this component setup.

Production.js

import Autocomplete from "@mui/material/Autocomplete";
import Box from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import TextField from "@mui/material/TextField";
 
export default function CustomAutoComplete(props) {

 return (
    <Stack sx={{ m: 1 }}>
      <Autocomplete
        sx={{ ml: 2, mr: 2 }}
        size="small"
        id="combo-box-demo"
        freeSolo
        inputValue={props.inputValue}
        onInputChange={(event, newValue) => {
          props.set(newValue);
        }}
        getOptionLabel={(data) => `${data.region_name}`}
        options={props.data}
        isOptionEqualToValue={(option, value) =>
          option.region_name === value.region_name
        }
        renderOption={(props, data) => (
          <Box component="li" {...props} key={data.id}>
            {data.region_name}
          </Box>
        )}
        renderInput={(params) => <TextField {...params} label="Region" />}
      
      />
    </Stack>
  );
}

Then importing it into a separate file EventDetails.js fetching the data and storing it in LocalStorage, which I'll move to useState eventually.

import CustomAutoComplete from "../../atoms/AutoComplete";
import FormGroup from "@mui/material/FormGroup";
import { Fragment, useState, useEffect } from "react";
import { useLocalStorage } from "../../utils/LocalStorage.js";

const EventDetails = () => {

  const [region, setRegion] = useLocalStorage("region", "");
  const [getRegion, setGetRegion] = useState([]);

// fetching backend data
 useEffect(() => {
    fetch("/authentication/region")
      .then((response) => response.json())
      .then((getRegion) => setGetRegion(getRegion));
  }, []);

return (
    <Fragment>
     <FormGroup sx={{ p: 2, m: 1 }}>
              <CustomAutoComplete
                inputValue={region}
                set={setRegion}
                data={getRegion}
                key={getRegion.id}
                name={region_name} // <--feeble attempt
                label="Region"
              />
    </FormGroup>
   </Fragment>
 );
};