Is there any version of this code as a functional component?

[sojinsamuel]

Will this do:

import { useState } from 'react';
import { SketchField, Tools } from 'react-sketch';

const ReactSketch = () => {
  const [tool, setTool] = useState(Tools.Pencil); 
  const [lineColor, setLineColor] = useState('black'); 

  return (
    <div>
      <SketchField
        width="800px" 
        height="400px"
        tool={tool} 
        lineColor={lineColor}
      />
      <button onClick={() => setTool(Tools.Pencil)}>Pencil</button>
      <button onClick={() => setTool(Tools.Rectangle)}>Rectangle</button>
      {/* Add more buttons for different tools if needed */}
    </div>
  );
};

export default DrawingComponent;