如何使用钩子在React Sematic UI中实现AddAdiditions？

import React, { useState } from 'react';

const AddAdiditions = () => {
  const [additions, setAdditions] = useState('');

  // 其他代码

  return (
    // JSX代码
  );
}

export default AddAdiditions;

import React, { useState } from 'react';
import { Form } from 'semantic-ui-react';

const AddAdiditions = () => {
  const [additions, setAdditions] = useState('');

  const handleInputChange = (event) => {
    setAdditions(event.target.value);
  }

  return (
    <Form>
      <Form.Input
        label="AddAdiditions"
        placeholder="Enter AddAdiditions"
        value={additions}
        onChange={handleInputChange}
      />
    </Form>
  );
}

export default AddAdiditions;

import React from 'react';
import AddAdiditions from './AddAdiditions';

const MyComponent = () => {
  // 其他代码

  return (
    <div>
      {/* 其他组件代码 */}
      <AddAdiditions />
      {/* 其他组件代码 */}
    </div>
  );
}

export default MyComponent;