diff --git a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js
index ee886840d19..bf48404d8d7 100644
--- a/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js
+++ b/packages/js/src/ai-assessment-fixes/components/ai-assessment-fixes-button.js
@@ -22,15 +22,14 @@ import { ReactComponent as LockClosed } from "../../../images/lock-closed.svg";
  *
  * @returns {JSX.Element} The AI Assessment Fixes button.
  */
-const AIAssessmentFixesButton = ({ id, isPremium }) => {
+const AIAssessmentFixesButton = ( { id, isPremium } ) => {
 	const aiFixesId = id + "AIFixes";
-	const ariaLabel = __("Optimize with AI", "wordpress-seo");
-	const [isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse] = useToggleState(false);
-	const activeAIButtonId = useSelect(select => select("yoast-seo/editor").getActiveAIFixesButton(), []);
-	const activeMarker = useSelect(select => select("yoast-seo/editor").getActiveMarker(), []);
-	const { setActiveAIFixesButton, setActiveMarker, setMarkerPauseStatus } = useDispatch("yoast-seo/editor");
-	const focusElementRef = useRef(null);
-	const [buttonClass, setButtonClass] = useState("");
+	const [ isModalOpen, , , setIsModalOpenTrue, setIsModalOpenFalse ] = useToggleState( false );
+	const activeAIButtonId = useSelect( select => select( "yoast-seo/editor" ).getActiveAIFixesButton(), [] );
+	const activeMarker = useSelect( select => select( "yoast-seo/editor" ).getActiveMarker(), [] );
+	const { setActiveAIFixesButton, setActiveMarker, setMarkerPauseStatus } = useDispatch( "yoast-seo/editor" );
+	const focusElementRef = useRef( null );
+	const [ buttonClass, setButtonClass ] = useState( "" );
 
 	const defaultLabel = __( "Optimize with AI", "wordpress-seo" );
 	const tooLongLabel = __( "Your text is too long for the AI model to process.", "wordpress-seo" );
@@ -71,28 +70,28 @@ const AIAssessmentFixesButton = ({ id, isPremium }) => {
 	 */
 	const handlePressedButton = () => {
 		// If there is an active marker when the AI fixes button is clicked, remove it.
-		if (activeMarker) {
-			setActiveMarker(null);
-			setMarkerPauseStatus(false);
+		if ( activeMarker ) {
+			setActiveMarker( null );
+			setMarkerPauseStatus( false );
 			// Remove highlighting from the editor.
-			window.YoastSEO.analysis.applyMarks(new Paper("", {}), []);
+			window.YoastSEO.analysis.applyMarks( new Paper( "", {} ), [] );
 		}
 
 		/* If the current pressed button ID is the same as the active AI button id,
 		we want to set the active AI button to null. Otherwise, update the active AI button ID. */
-		if (aiFixesId === activeAIButtonId) {
-			setActiveAIFixesButton(null);
+		if ( aiFixesId === activeAIButtonId ) {
+			setActiveAIFixesButton( null );
 		} else {
-			setActiveAIFixesButton(aiFixesId);
+			setActiveAIFixesButton( aiFixesId );
 		}
 
 		// Dismiss the tooltip when the button is pressed.
-		setButtonClass("");
+		setButtonClass( "" );
 	};
 
-	const handleClick = useCallback(() => {
-		if (isPremium) {
-			doAction("yoast.ai.fixAssessments", aiFixesId);
+	const handleClick = useCallback( () => {
+		if ( isPremium ) {
+			doAction( "yoast.ai.fixAssessments", aiFixesId );
 			/* Only handle the pressed button state in Premium.
 			We don't want to change the background color of the button and other styling when it's pressed in Free.
 			This is because clicking on the button in Free will open the modal, and the button will not be in a pressed state. */
@@ -100,7 +99,7 @@ const AIAssessmentFixesButton = ({ id, isPremium }) => {
 		} else {
 			setIsModalOpenTrue();
 		}
-	}, [handlePressedButton, setIsModalOpenTrue]);
+	}, [ handlePressedButton, setIsModalOpenTrue ] );
 
 	// The button is pressed when the active AI button id is the same as the current button id.
 	const isButtonPressed = activeAIButtonId === aiFixesId;
@@ -108,44 +107,37 @@ const AIAssessmentFixesButton = ({ id, isPremium }) => {
 	// Add tooltip classes on mouse enter and remove them on mouse leave.
 	const handleMouseEnter = useCallback( () => {
 		const direction = isEnabled ? "yoast-tooltip-w" : "yoast-tooltip-nw";
-		setTooltipClass( `yoast-tooltip ${ direction }` );
+		setButtonClass( `yoast-tooltip ${ direction }` );
 	}, [ isEnabled ] );
 
-	const handleMouseLeave = useCallback(() => {
+	const handleMouseLeave = useCallback( () => {
 		// Remove tooltip classes on mouse leave
-		setButtonClass("");
-	}, []);
+		setButtonClass( "" );
+	}, [] );
 
 	return (
-		<div
-			aria-label={ ariaLabel }
-			className={ tooltipClass }
-			onMouseEnter={ handleMouseEnter }
-			onMouseLeave={ handleMouseLeave }
+		<IconAIFixesButton
+			onClick={ handleClick }
+			ariaLabel={ ariaLabel }
+			onPointerEnter={ handleMouseEnter }
+			onPointerLeave={ handleMouseLeave }
+			id={ aiFixesId }
+			className={ `ai-button ${buttonClass}` }
+			pressed={ isButtonPressed }
+			disabled={ ! isEnabled }
 		>
-			<IconAIFixesButton
-				onClick={handleClick}
-				ariaLabel={ariaLabel}
-				onPointerEnter={handleMouseEnter}
-				onPointerLeave={handleMouseLeave}
-				id={aiFixesId}
-				className={`ai-button ${buttonClass}`}
-				pressed={isButtonPressed}
-				// disabled={!isEnabled}
-			>
-				{!isPremium && <LockClosed className="yst-fixes-button__lock-icon" />}
-				<SparklesIcon pressed={isButtonPressed} />
-				{
-					// We put the logic for the Upsell component in place.
-					// The Modal below is only a placeholder/mock. When we have the design for the real upsell, the modal should be replaced.
-					isModalOpen && <Modal className="yst-introduction-modal" isOpen={isModalOpen} onClose={setIsModalOpenFalse} initialFocus={focusElementRef}>
-						<Modal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl yst-introduction-modal-panel">
-							<ModalContent onClose={setIsModalOpenFalse} focusElementRef={focusElementRef} />
-						</Modal.Panel>
-					</Modal>
-				}
-			</IconAIFixesButton>
-		</div>
+			{ ! isPremium && <LockClosed className="yst-fixes-button__lock-icon" /> }
+			<SparklesIcon pressed={ isButtonPressed } />
+			{
+				// We put the logic for the Upsell component in place.
+				// The Modal below is only a placeholder/mock. When we have the design for the real upsell, the modal should be replaced.
+				isModalOpen && <Modal className="yst-introduction-modal" isOpen={ isModalOpen } onClose={ setIsModalOpenFalse } initialFocus={ focusElementRef }>
+					<Modal.Panel className="yst-max-w-lg yst-p-0 yst-rounded-3xl yst-introduction-modal-panel">
+						<ModalContent onClose={ setIsModalOpenFalse } focusElementRef={ focusElementRef } />
+					</Modal.Panel>
+				</Modal>
+			}
+		</IconAIFixesButton>
 	);
 };