I want to add attribute and add class in react js.I am trying to create TABS using react.I want to add hidden class when Tab element width is more the 45px and new attribute aria-hidden with value true . can you please tell me how to do this ?

component

<Tabs>
      {data.map((i, index) => (
        <li key={index}>{i}</li>
      ))}
    </Tabs>

Tabs.js

 const getTabs = () => {
    console.log("get tabs");
    const { blockWidth, tabsTotalWidth, tabDimensions, showMoreWidth } = state;

    let tabIndex = 0;
    let availableWidth = blockWidth - showMoreWidth;
    return children.reduce(
      (result, tabItem, index, arr) => {
        const { key = index } = tabItem.props;
        const tabWidth = tabDimensions[key] ? tabDimensions[key].width : 0;

        if (tabWidth < 45) {
          //  aria-hidden= false
          // remove hidden class tabItem if present.
          result.tabsVisible.push(tabItem);
        } else {
          //  aria-hidden= true
          // add hidden class tabItem
          result.tabsHidden.push(tabItem);
        }
        /* eslint-enable no-param-reassign */

        availableWidth -= tabWidth;
        return result;
      },
      {
        tabsVisible: [],
        tabsHidden: []
      }
    );
  };

here is my code

https://codesandbox.io/s/reverent-hermann-yt7es?file=/src/tabs.js:2147-2486

I am rendering tab like this

return (
     <ul ref={tabsRef} className="rc64nav">
          {/* {children} */}
          {tabsVisible.reduce((result, tabItem, tabIndex) => {
            result.push(tabItem);
            return result;
          }, [])}
    
          {tabsHidden.reduce((result, tabItem, tabIndex) => {
            result.push(tabItem);
            return result;
          }, [])}
        </ul>