Fix/textarea highlight sizing

INSTUI-3960

test plan:

test the following code to have correct highlight borders when focused:

class Example extends React.Component {
  state = { description: "Hello World" };

  handleChange = (e) => this.setState({ description: e.target.value });

  componentDidMount() {
    setTimeout(
      () =>
        this.setState({
          description:
            "The next render after mounting causes wrong outline when using custom paddings",
        }),
      0
    );
  }

  render() {
    return (
      <TextArea
        textareaRef={(ref) => ref?.focus()}
        label="Description"
        value={this.state.description}
        onChange={this.handleChange}
        themeOverride={(_, { spacing }) => {
          return {
            padding: `${spacing.xxSmall} ${spacing.small}`,
          };
        }}
      />
    );
  }
}

render(<Example />);

instructure / instructure-ui

Fix/textarea highlight sizing #1422