'Jotai' Best practices

export const trainingPhraseAtom = atom("");

export const filterAtom = atom("");

export const trainingPhrasesAtom = atom<trainingPhraseType[]>([]);

export const addTraningPhraseAtom = atom(null, (get, set) => {
  set(
    trainingPhrasesAtom,
    addTrainingPhrase(get(trainingPhrasesAtom), get(trainingPhraseAtom))
  );
  set(trainingPhraseAtom, "");
});

export const filteredTrainingPhaseAtom = atom<trainingPhraseType[]>((get) => {
  return filterTrainingPhase(get(trainingPhrasesAtom), get(filterAtom));
});

export const removeTrainingPhraseAtom = atom(null, (get, set, id: number) => {
  set(trainingPhrasesAtom, deleteTrainingPhrase(get(trainingPhrasesAtom), id));
});

import { removeTrainingPhraseAtom, filteredTrainingPhaseAtom } from "./store";
import { useAtomValue, useSetAtom } from "jotai";

function DisplayTrainingPhase() {
  const trainingPhraseList = useAtomValue(filteredTrainingPhaseAtom);
  const removeTrainingPhrase = useSetAtom(removeTrainingPhraseAtom);
  return (
    <>
      {trainingPhraseList.map((e) => {
        return (
          <div key={e.id}>
            {e.trainingPhrase}
            <button onClick={() => removeTrainingPhrase(e.id)}>delete</button>
          </div>
        );
      })}
    </>
  );
}

function AddTrainingPhase() {
  const [trainingPhraseVal, setTrainingPhrase] = useAtom(trainingPhraseAtom);
  const setFilterAtom = useSetAtom(filterAtom);

  const addTrainingPhrase = useSetAtom(addTraningPhraseAtom);
  return ...
}