react not rendering JSX inside map function

Question

I'm trying to run a loop then render JSX content:

The console.log is rendering right data but the return does not render html content

const StaticTable = (props) => {
  const [data, setData] = useState({});
  useEffect(() => {
    const { audio, ...newData } = props.data;
    setData(newData);
  }, []);
  return (
    <>
      <Button content="Add" primary />
      <div>
        {Object.keys(data).map((keyName, i) => {
          data[keyName].map((elm) => {
            console.log(elm);
            return (
              <Flex key={i.toString()} gap="gap.small">
                <Header as="h5" content={new Date(keyName).getDay()} />

                <Header as="h5" content="Start Date" />
                <p>{data[keyName]}</p>
                <Flex>
                  <Dropdown
                    items={timeoptions}
                    placeholder="Start Time"
                    defaultValue={elm.start}
                    checkable
                    getA11ySelectionMessage={{
                      onAdd: (item) => `${item} has been selected.`,
                    }}
                  />
                  <div style={{ margin: "10px 0px" }}>
                    <Dropdown
                      items={timeoptions}
                      placeholder="End Time"
                      defaultValue={elm.end}
                      checkable
                      getA11ySelectionMessage={{
                        onAdd: (item) => `${item} has been selected.`,
                      }}
                    />
                  </div>
                </Flex>
                <Header as="h5" content="End Date" />
              </Flex>
            );
          });
        })}
      </div>
    </>
  );
};

I got empty html

Answer 1

const StaticTable = (props) => {
  const [data, setData] = useState({});
  useEffect(() => {
    const { audio, ...newData } = props.data;
    setData(newData);
  }, []);
  return (
    <>
      <Button content="Add" primary />
      <div>
        {Object.keys(data).map((keyName, i) => {
           return (
              <Flex key={i} gap="gap.small">
                <Header as="h5" content={new Date(keyName).getDay()} />

                <Header as="h5" content="Start Date" />
                <p>{keyName}</p>
                <Flex>
                  <Dropdown
                    items={timeoptions}
                    placeholder="Start Time"
                    defaultValue={keyName.start}
                    checkable
                    getA11ySelectionMessage={{
                      onAdd: (item) => `${item} has been selected.`,
                    }}
                  />
                  <div style={{ margin: "10px 0px" }}>
                    <Dropdown
                      items={timeoptions}
                      placeholder="End Time"
                      defaultValue={keyName.end}
                      checkable
                      getA11ySelectionMessage={{
                        onAdd: (item) => `${item} has been selected.`,
                      }}
                    />
                  </div>
                </Flex>
                <Header as="h5" content="End Date" />
              </Flex>

            );
          });
        })}
      </div>
    </>
  );
};