Reactでformの中をリセットしたい

Reactでresetボタンを押すか、送信するときにinput要素内をリセットしたい

Form要素の部分にbuttonを新たに作成しresetボタンを押すとinputの中身がリセットされるようにする。または、inputの内容が送信されると同時に入力した文字がリセットされるようにしたいです。

Form.jsのhandleSubmit関数内でif文の後に、resetする関数を追加してonClickに指定するなどしてみましたが、handleSubmitが働いてリストを追加する処理になってしまいます。

お時間のある方、アドバイスを頂きたいです。

Appjs
import React, { useState } from 'react';
import Form from './Form';
import List from './List';
import { Title } from './styles';

import shortid from 'shortid';
import { clear } from 'sisteransi';

const App = () => {

  const [todos, setTodos] = useState([
    {
      id: shortid.generate(),
      content: '洗濯をする'
    },
    {
      id: shortid.generate(),
      content: '課題をする'
    },
    {
      id: shortid.generate(),
      content: '御飯を作る'
    }
  ]);

  const addTodo = (content) => {
    const newTodos = [
      ...todos,  //配列に中を展開する
      {
        id: shortid.generate(),
        content
      }
    ]
    setTodos(newTodos)
  };

  //削除
  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id))
  };

  return (
    <>
      <Title>Todo App</Title>
      <Form
        todos={todos}
        setTodos={setTodos}
        addTodo={addTodo}
        
      ></Form>
      <List todos={todos} deleteTodo={deleteTodo}></List>
    </>
  );
};



export default App;

Formjs
import React, { useState } from 'react';
import { MyForm } from './styles';
import { Input } from './styles';
import { clear } from 'sisteransi';


const Form = ({ todos, setTodos, addTodo }) => {
  const [value, setValue] = useState('');
  console.log(value)
  const handleSubmit = (e) => {
    e.preventDefault()
    if (value) {
      addTodo(value);
    } else {
      alert('文字を入力して下さい');
    };
   
  };


  return (
    <MyForm onSubmit={handleSubmit}>
      <Input
        type="text"
        onChange={e => setValue(e.target.value)}
      />
      <button
      onClick={}
      >Clear</button>
    </MyForm>
  );
};

export default Form;