Javascript react函数中的类激活

告诉我如何单击“下一步”按钮来激活元素的类。当单击某个类时，样式应该更改。如何在此函数中正确实现此示例

    export default ({ title, img, onNext }) => {

    return (
        <div>
                <div className={cn('info')}>                          
                            <Button shape="round">Start</Button>
                            <Button shape="round" type="default" onClick={onNext}> Next</Button>                        
                    </div>

                </div>
    );
};

---

创建一个函数来执行单击操作

    import React, { useState } from 'react';

    const MyComponent = ({ title, img, onNext }) => {
    const [active, setActive] = useState(false);

    const onNext = () => {
      setActive(true);
    }
    return (
       <div>
          <div className={cn('info')} style={active ? {backgroundColor: '#ff0000'} : null}>                          
            <Button shape="round">Start</Button>
            <Button shape="round" type="default" onClick={onNext}> 
               Next
            </Button>                        
          </div>
      </div>
        );
    }
export default MyComponent;

与此相同，您还可以动态更改类名