// @flow
import React, { useState } from 'react';

import Select from 'react-select';
import { colourOptions } from '../data';

export default function CustomAriaLive() {
  const [ariaFocusMessage, setAriaFocusMessage] = useState('');

  const style = {
    blockquote: {
      fontStyle: 'italic',
      fontSize: '.75rem',
      margin: '1rem 0',
    },
    label: {
      fontSize: '.75rem',
      fontWeight: 'bold',
      lineHeight: 2,
    },
  };

  const focusOption = ({ focusedOption, getOptionLabel }) => {
    const msg = `custom aria option focus message: 
      ${getOptionLabel(focusedOption)}`;
    setAriaFocusMessage(msg);
    return msg;
  };

  return (
    <form>
      <label style={style.label} id="aria-label" htmlFor="aria-example-input">
        Select a color
      </label>

      <Select
        aria-labelledby="aria-label"
        ariaLiveMessages={{
          focusOption,
        }}
        inputId="aria-example-input"
        name="aria-live-color"
        options={colourOptions}
      />

      {!!ariaFocusMessage && (
        <blockquote style={style.blockquote}>"{ariaFocusMessage}"</blockquote>
      )}
    </form>
  );
}

// @flow
import React from 'react';

import Select from 'react-select';
import { colourOptions } from '../data';

export default function CustomAriaLive() {
  return (
    <form>
      <label id="aria-live-select-label" htmlFor="select-aria-live-example">
        Select a color
      </label>

      <Select
        aria-labelledby="aria-live-select-label"
        // ariaLiveMessages={{
        //   focusOption: ({ focusedOption, getOptionLabel }) => {
        //     return `custom aria option focus message:
        //       ${getOptionLabel(focusedOption)}`;
        //   },
        // }}
        inputId="select-aria-live-example"
        name="aria-live-color"
        options={colourOptions}
        menuIsOpen
      />
    </form>
  );
}

--- 
+++ 
@@ -1,29 +1,51 @@
 // @flow
-import React from 'react';
+import React, { useState } from 'react';
 
 import Select from 'react-select';
 import { colourOptions } from '../data';
 
 export default function CustomAriaLive() {
+  const [ariaFocusMessage, setAriaFocusMessage] = useState('');
+
+  const style = {
+    blockquote: {
+      fontStyle: 'italic',
+      fontSize: '.75rem',
+      margin: '1rem 0',
+    },
+    label: {
+      fontSize: '.75rem',
+      fontWeight: 'bold',
+      lineHeight: 2,
+    },
+  };
+
+  const focusOption = ({ focusedOption, getOptionLabel }) => {
+    const msg = `custom aria option focus message: 
+      ${getOptionLabel(focusedOption)}`;
+    setAriaFocusMessage(msg);
+    return msg;
+  };
+
   return (
     <form>
-      <label id="aria-live-select-label" htmlFor="select-aria-live-example">
+      <label style={style.label} id="aria-label" htmlFor="aria-example-input">
         Select a color
       </label>
 
       <Select
-        aria-labelledby="aria-live-select-label"
-        // ariaLiveMessages={{
-        //   focusOption: ({ focusedOption, getOptionLabel }) => {
-        //     return `custom aria option focus message:
-        //       ${getOptionLabel(focusedOption)}`;
-        //   },
-        // }}
-        inputId="select-aria-live-example"
+        aria-labelledby="aria-label"
+        ariaLiveMessages={{
+          focusOption,
+        }}
+        inputId="aria-example-input"
         name="aria-live-color"
         options={colourOptions}
-        menuIsOpen
       />
+
+      {!!ariaFocusMessage && (
+        <blockquote style={style.blockquote}>"{ariaFocusMessage}"</blockquote>
+      )}
     </form>
   );
 }
Update custom aria message example
