how to apply focus on text area of react-mentions

I want to change the border color on focus in this default object only , but it's not working. This is the react-mentions package link- React-Mentions. Is there something I'm missing and did wrong?

this is the default style I used

export default {
  control: {
    backgroundColor: '#fff',
    fontSize: 14,
    fontWeight: 'normal',
  },

  '&multiLine': {
    control: {
      fontFamily: 'monospace',
      minHeight: 63,
    },
    input: {
      padding: 9,
      border: '1px solid silver',
 '&focused': {
         border: '1px solid black',
      },
    },
  },

  suggestions: {
    list: {
      backgroundColor: 'white',
      border: '1px solid rgba(0,0,0,0.15)',
      fontSize: 14,
    },
    item: {
      padding: '5px 15px',
      borderBottom: '1px solid rgba(0,0,0,0.15)',
      '&focused': {
        backgroundColor: '#cee4e5',
      },
    },
  },
}

This is the Mention Code, apart from the styling issue it's working fine

const MentionInput = ({ options }) => {
  let [data, setData] = useState("");

  function handleChange(e) {
    setData(e.target.value);
  }

  return (
    <>
      <MentionsInput
        value={data}
        onChange={handleChange}
        className="h-full"
        style={defaultStyle}
      >
        <Mention
          trigger="@"
          markup="@__display__ "
          data={options}
          appendSpaceOnAdd={true}
          displayTransform={(id, display) => {
            return `@${display}`;
          }}
          //   style={defaultMentionStyle}
        />
      </MentionsInput>
    </>
  );
};