How to focus a child div when down arroy key was pressed?

Question

I am having a dropdown which I want to allow user to select the dropdown value by pressing keyboard key down arrow.The format of dropdown is like

<div>
<StyledMenu className="It is a modal which had search field(both search and dropdown)">
<Dropdown className="Purely Dropdown"></Dropdown>
</StyledMenu>
</div>

When I am pressing keydown, it is focusing styledmenu but not the actual dropdown.It is like

I have used some of the Html Events,but didn't work.

          <StyledMenu
            id="customized-menu"
            className="filter-dropdown"
            anchorEl={poDeliveryLocationAnchorEl}
            keepMounted
            open={Boolean(poDeliveryLocationAnchorEl)}
            onClose={handlePoDeliveryLocationClose}
            onBlur={handlePoDeliveryLocationClose}
          >
            <div className="d-flex flex-column align-items-center" id="deldiv">
              <StyledMenuItem>
                {poDeliveryLocationAnchorEl ? (
                  <Autocomplete
                    id="toSh"
                    options={props.poDeliveryLocationsList}
                    getOptionLabel={(options) =>
                      options.title
                        ? options?.title +
                          " (" +
                          options?.Address?.city +
                          " ," +
                          options?.Address?.country +
                          ")"
                        : " (" + options.id + " )"
                    }
                    onChange={(event, newValue) => {
                      setPoDeliveryLocationFilterOnSelect(newValue.id);
                    }}
                    style={{ width: "16rem" }}
                    renderInput={(params) => (
                      <TextField
                        {...params}
                        label={t("search_location")}
                        variant="outlined"
                      />
                    )}
                  />
                ) : (
                  <div>{t("empty_list")}</div>
                )}
              </StyledMenuItem>
              <StyledMenuItem>
                <button
                  style={{ padding: "10px", height: "40px", width: "130px" }}
                  className="btn btn-link btn-sm font-weight-bold"
                  variant="outlined"
                  color="primary"
                  onClick={() => setPoDeliveryLocationFilterOnSelect("")}
                >
                  {t("clear")}
                </button>
              </StyledMenuItem>
            </div>
</StyledMenuItem>

Help me to find the solution.Thank you